Xem minh họa: http://jsfiddle.net/kimthuy900/fe7JL/140/
-> [HTML5] Tạo danh sách phát (playlist) video/ MP4 (Hoàn chỉnh)
<!DOCTYPE html>
<html>
<head>
<!--Shuffle-->
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
for (var $x=$(".content li"), i=$x.length-1, j, temp; i>=0; i--) { j=Math.floor(Math.random()*(i+1)), temp=$x[i], $x[i]=$x[j], $x[j]=temp; }
$x.each(function(i, li) { $(".content").append(li); });
});//]]>
</script>
<!--End shuffle-->
<!--Playlist-->
<style type='text/css'>
#playlist,audio{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 type='text/javascript'>//<![CDATA[
$(window).load(function(){
var audio;
var playlist;
var tracks;
var current;
init();
function init(){
current = 0;
audio = $('audio');
playlist = $('#playlist');
tracks = playlist.find('li a');
len = tracks.length - 1;
audio[0].volume = .80;
playlist.find('a').click(function(e){
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, audio[0]);
});
audio[0].addEventListener('ended',function(e){
current++;
if(current == len){
current = 0;
link = playlist.find('a')[0];
}else{
link = playlist.find('a')[current];
}
run($(link),audio[0]);
});
}
function run(link, player){
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
audio[0].load();
audio[0].play();
}
});//]]>
</script>
<!--End playlist-->
</head>
<body>
<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg" autoplay>
<source type="audio/mp3" src="http://www.4shared.com/img/5509742828/a0ec04c6/dlink__2Fdownload_2FYsGlmzmbba_2Fbentley_5Fdubs.mp3_3Ftsid_3D20150401-035728-9e8a463b_26lgfp_3D7200_26sbsr_3Ded923f51b1486d3a858feea785a5716444956bbecc8fb93f/preview.mp3">
Sorry, your browser does not support HTML5 audio.
</audio>
<div id="n"></div>
<ul id="playlist" class="content">
<li class="active"><a href="http://k002.kiwi6.com/hotlink/3i06y32mee/ha_trang--elvis_phuong.mp3">Ha trang - Elvis Phung</a></li>
<li><a href="http://k002.kiwi6.com/hotlink/q0cd9vl8c3/nhu_canh_vac_bay--hong_nhung.mp3">Nhu canh vac bay - Hong Nhung</a></li>
<li><a href="http://k002.kiwi6.com/hotlink/in5c2r7a3o/toi_ru_em_ngu--elvis_phuong.mp3">Toi ru em ngu - Elvis Phuong</a></li>
<li><a href="http://k002.kiwi6.com/hotlink/66u0n8s0je/giot_nang_ben_them--thanh_lam.mp3">Giot nang ben them - Thanh Lam</a></li>
<li><a href="http://k007.kiwi6.com/hotlink/wulp9njnrs/L_Th_-_Tr_n_Th_i_H_a.mp3">La thu - Tran Thai Hoa</a></li>
<li><a href="http://k002.kiwi6.com/hotlink/bd730inc4f/Nh_n_nh_ng_m_a_thu_i--elvis_phuong.mp3">Nhin nhung mua thu di - Elvis Phuong</a></li>
</ul>
</body>
</html>
Để tắt chức năng tự động phát ngẫu nhiên, chỉ cần xóa bỏ dòng này: <div id="n"></div> và ngược lại.
Để phát danh sách video (mp4), thay <audio ...></audio> bằng <video ...></video> và thay tệp có đuôi .mp3 bằng tệp có đuôi .mp4, Thay tất cả chữ audio thành video, thêm kích cỡ cho trình phát video ví dụ: <video height="350px" width="550px id="video" poster="" autoplay><source src="movie.mp4" type="video/mp4"></video>
Bạn có thể sao chép tất cả mã html trên rồi dán vào notepad. Sau đó lưu tệp tin với tên có đuôi .html (ví dụ: audio-array-shuffle-playlist-1.html
Kế tiếp, bạn vào nơi lưu tệp tin này rồi nhấp đúp chuột vào tệp để mở trình duyệt xem minh họa. Lưu ý HTML5 không hỗ trợ một số trình duyệt quá cũ đại loại như IE6.
Để mở notepad: Start -> Run -> notepad -> nhấn enter
Bài viết hay lắm bạn, nhưng mình còn vài chỗ chỉnh hoài ko xong là làm sao cho cái play list nó xếp ngang thay vì xếp dọc bên dưới và có cái ảnh nhỏ phía trên cái title đó bạn. Please Help me. Thank bạn !
Trả lờiXóakhông play nhạc tu google drive dc ha bạn có thể giup minh dc không
Trả lờiXóacảm ơn bạn đã replay. Ý mình muốn nói là cái playlist phải nằm dưới player chính, có ảnh đại diện và theo phương ngang có mũi tên chạy qua chạy lại hoặc là có thanh scrollbar để se lên, xuống đó bạn. Chúc năm mới thật nhiều may mắn nhé bạn.
Trả lờiXóa