Cách thực hiện:
1. Sao chép và dán mã dưới đây vào ngay sau thẻ <head> của web/ blog:
<!--HTML5 Video playlist 1 | Socplay.blogspot.com-->
<script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/>
<!--Tệp tin dự bị: <script src='http://socplay.weebly.com/uploads/1/1/4/1/11413983/html5-video-playlist-jquery.js' type='text/javascript'/>-->
<style type='text/css'>
#playlist {
display:table;
}
#playlist li{
cursor:pointer;
padding:8px;
}
#playlist li:hover{
color:blue;
}
#videoarea {
float:left;
width:620px;
height:350px;
margin:5px;
border:1px solid silver;
}
</style>
<!--End code-->
Thay đổi giá trị màu đỏ cho thích hợp với blog của bạn.
2. Sao chép và dán mã dưới đây vào trước thẻ </head> của web/ blog
<!--HTML5 video playlist 2 | Socplay.blogspot.com-->
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
$("#playlist li").on("click", function() {
$("#videoarea").attr({
"src": $(this).attr("movieurl"),
"poster": "",
"autoplay": "autoplay"
})
})
$("#videoarea").attr({
"src": $("#playlist li").eq(0).attr("movieurl"),
"poster": $("#playlist li").eq(0).attr("moviesposter")
})
})
});//]]>
</script>
<!--End code-->
3. Nhúng mã như dưới đây vào bài đăng để tạo danh sách phát/ playlist:
<video autoplay="true" id="videoarea" controls="controls" poster="" src=""></video>
<ul id="playlist">
<li movieurl="http://nplus.nixcdn.com/448eca38f491f0a99aef2bf8360e557e/521f4a13/PreNCT6/AnhMuonEmSongSao-BaoAnh-2730206.mp4"><b>Anh muốn em sống sao - Bao Anh</b></li>
<li movieurl="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4"><b>Sintel</b></li>
<li movieurl="http://html5example.net/static/video/html5_Video_VP8.webm"><b>Resident Evil</b></li>
<li movieurl="http://www.ioncannon.net/examples/vp8-webm/big_buck_bunny_480p.webm"><b>Big Buck Bunny</b></li>
</ul>
- Trong đó,
- true: Tự động phát
- http://nplus.nixcdn.com/448eca38f491f0a99aef2bf8360e557e/521f4a13/PreNCT6/AnhMuonEmSongSao-BaoAnh-2730206.mp4 là đường dẫn (URL) tệp tin video có định dạng .MP4. Bạn có thể tải Video lên các hosting miển phí như: Videobam, Clip.vn; tải MP3 lên Kiwi6.com
- Anh muốn em sống sao - Bao Anh,Sintel,Resident Evil, Big Buck Bunny là tiêu đề của video/ MP3
- .webm là tệp tin video có định dạng .webm
Hình ảnh trong bài viết chỉ mang tính trang trí.
Mình làm thấy ok nhưng sao cái playlist nó nhảy xuống mỗi dòng bên dưới khung player chứ ko phải nằm o873 trong cái player bạn ạ. Dù sao cũng thanks bạn!
Trả lờiXóacần giúp đỡ. mình chưa làm được. ib riêng mình được không. mail: yeuchimotdem@gmail.com.rất cảm ơn bạn
Trả lờiXóacần giúp đỡ. mình chưa làm được. ib riêng mình được không. mail: yeuchimotdem@gmail.com.rất cảm ơn bạn
Trả lờiXóaad ơi làm sao để có cái khung như kia thế
Trả lờiXóa