voa-feed
/
template.html

<html>
<head>
	<title>VOA Auto Player</title>
</head>
<body>
	<div id="pl_north">
	  <video  id="id_player" width="auto" height="90%" autoplay="autoplay" controls="controls" >
	  		 <p>Your browser doesn't support HTML5 video!</p>
	        <span style="white-space:pre"></span>
	  </video>
	</div>
	<div id="pl_south">
		<button id="btn_prev"> prev</button>
		<button id="btn_next"> next</button>
		<button id="btn_loop"> No Loop</button>
	</div>
</body>

<script language="javascript">
    var listMedia = ['${LIST_OF_MEDIA}'];
    var currentIndex = 0;
    var isLoop = false;
    var video = document.getElementById("id_player");
    video.addEventListener('ended', function(){
    	if(isLoop){
    		play();
    	}else{
    		next();
    	}

    });

    document.getElementById("btn_prev").addEventListener('click', function(){
    	preview();
    });

    document.getElementById("btn_next").addEventListener('click', function(){
    	next();
    });

    document.getElementById("btn_loop").addEventListener('click', function(){
    	isLoop = !isLoop;
    	if(isLoop){
    		this.innerHTML = 'Looping';
    	}else{
    		this.innerHTML = 'No Loop';
    	}
    });

    function play() {
        video.src = listMedia[currentIndex];
        video.load();
        video.play();
    }

    function preview(){
    	currentIndex--;
    	if(currentIndex < 0){
            currentIndex = listMedia.length - 1;
        }
    	play();
    }

    function next(){
    	currentIndex++;
        if(currentIndex >= listMedia.length){
            currentIndex = 0;
        }
        play();
    }
    // init
  	play();
</script>

</html>