[HTML5] Tạo danh sách phát (playlist) video/ MP4 (Hoàn chỉnh)
Danh sách phát viết bằng HTML5, hiển thị tốt trên tất cả các trình duyệt HTML5 trong Windows, Android, iOS,... Tự động phát lần lượt hết các clip trong playlist hoặc người xem nhấp chọn clip mà họ muốn xem.
Xem minh họa: http://timvn.blogspot.com/2015/03/html5-video-playlist-demo.html
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<!--CSS-->
<style type='text/css'>
#playlist,video{background:#ccccff;width:400px;padding:10px;}
.active a{color:#5DB0E6;text-decoration:none;}
li a{color:#eeeedd;background:#194775;padding:5px;display:block;}
li a:hover{text-decoration:none;}
</style>
<!--Script-->
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var video;
var playlist;
var tracks;
var current;
init();
function init(){
current = 0;
video = $('video');
playlist = $('#playlist');
tracks = playlist.find('li a');
len = tracks.length - 1;
video[0].volume = .80;
playlist.find('a').click(function(e){
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, video[0]);
});
video[0].addEventListener('ended',function(e){
current++;
if(current == len){
current = 0;
link = playlist.find('a')[0];
}else{
link = playlist.find('a')[current];
}
run($(link),video[0]);
});
}
function run(link, player){
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
video[0].load();
video[0].play();
}
});//]]>
</script>
</head>
<body>
<video width="90%" height="auto" id="video" preload="auto" tabindex="0" controls="" type="video/mp4" poster="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS2iMjWrT7criwI0gFsJ5-bCRl3vKHiGCpiG74HEuKmv7h_w97tctLDP0YiBEARV3-m75VSiS8rJWqvMS_B5rEaJv8qeAnYnxxKD_Fii33MnnXcPxOk2v4-KrrkoP9Lf8OCjEoWejIs5LL/s400/final.gif" autoplay>
<source type="video/mp4" src="http://dc771.4shared.com/img/5494019503/66d77afe/dlink__2Fdownload_2FT-ODb7VEce_3Ftsid_3D20150327-020214-f355f1f4_26lgfp_3D10000_26sbsr_3Da48675109f7bb6ed5aaa6dc06c5d76614b0fab60309a997e/preview.mp4">
<b>Trình duyệt của bạn không hỗ trợ HTML5</b>
</video>
<ul id="playlist">
<li class="active"><a href="http://dc771.4shared.com/img/5494019503/66d77afe/dlink__2Fdownload_2FT-ODb7VEce_3Ftsid_3D20150327-020214-f355f1f4_26lgfp_3D10000_26sbsr_3Da48675109f7bb6ed5aaa6dc06c5d76614b0fab60309a997e/preview.mp4">Ravel Bolero</a></li>
<li><a href="http://dc745.4shared.com/img/5493981912/2bdda795/dlink__2Fdownload_2FTLcdUx5Pce_3Ftsid_3D20150327-005546-ef6d285_26lgfp_3D10000_26sbsr_3Da0c07db55514e610c36a6351c302ecb75a4064f8df40d930/preview.mp4">Moonlight Sonata - Beethoven</a></li>
<li><a href="http://demosthenes.info/assets/videos/mountain.mp4">Canon in D Pachabel</a></li>
<li><a href="http://dc777.4shared.com/img/5509093056/5b2f7dd2/dlink__2Fdownload_2FsojmflDFce_3Ftsid_3D20150401-015950-61ba148a_26lgfp_3D10000_26sbsr_3D8b5150f0addc857d5218d9c9c0342e21d333c3224ea47d9/preview.mp4">Bình minh xua tan bóng đêm</a></li>
</ul>
</body>
</html>
Trong đó:
-http://dc771.4shared.com/img/5494019503/66d77afe/dlink__2Fdownload_2FT-ODb7VEce_3Ftsid_3D20150327-020214-f355f1f4_26lgfp_3D10000_26sbsr_3Da48675109f7bb6ed5aaa6dc06c5d76614b0fab60309a997e/preview.mp4 là URL video định dạng MP4
-Ravel Bolero là tiêu đề của video.
Không có nhận xét nào