kimluc
Hiển thị các bài đăng có nhãn HTML. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn HTML. Hiển thị tất cả bài đăng

[HTML] Phát hiện audio/ MP3 phát kết thúc và tự động thực thi 1 nhiệm vụ

Đoạn mã dưới đây dùng để phát hiện 1 bài hát hay 1 tệp tin mp3/ audio phát kết thúc và trình duyệt sẽ tự động thực thị một mệnh lệnh do bạn cài đặt trước như tự động tải trang kế tiếp, tự động thông báo âm thanh phát kết thúc,...

<audio id="audio" autoplay controls>
<source src="URL.mp3" type="audio/mpeg">
</audio>
<div>
<b>Kế tiếp: "Đường xưa lối cũ" trong <span id="timer">...</span> giây</b>
</div>
<script>
var audio = document.getElementById("audio");
audio.onended = function() {
setTimeout(function(){ window.location.href = ['http://kimluc.blogspot.com/2015/12/uong-xua-loi-cu-thanh-tuyen.html']}, 10000);
var hou = 0;
var sec = 10;
setInterval(function(){
var a = new Date();
document.getElementById("timer").innerHTML = hou +" : " + sec ;
sec--;
if(sec == 00)
{
hou--;
sec = 10;
if (hou == 0)
{
hou = 0;
}
}
},1000);
}

function resetTimer()
{
};
</script>

Trong đó,

- URL.mp3 là link trực tiếp dẫn đến tệp tin mp3 được lưu trữ trực tuyến trên internet ví dụ như: https://archive.org/download/album-nhac-mua-dong-tuyen-chon/Lien%20Khuc_%20Bai%20Thanh%20Ca%20Buon_%20Chuyen%20Tin%20%5bMP3%20320kbps%5d.mp3;

- http://kimluc.blogspot.com/2015/12/uong-xua-loi-cu-thanh-tuyen.html là link của 1 trang web mà trình duyệt sẽ tự động tải về sau khi tệp tin âm thanh phát xong.
0

[HTML] Phát hiện audio/ MP3 phát kết thúc và tự động thực thi 1 nhiệm vụ

Đoạn mã dưới đây dùng để phát hiện 1 bài hát hay 1 tệp tin mp3/ audio phát kết thúc và trình duyệt sẽ tự động thực thị một mệnh lệnh do bạn cài đặt trước như tự động tải trang kế tiếp, tự động thông báo âm thanh phát kết thúc,...

<audio id="audio" autoplay controls>
<source src="URL.mp3" type="audio/mpeg">
</audio>
<div>
<b>Kế tiếp: "Đường xưa lối cũ" trong <span id="timer">...</span> giây</b>
</div>
<script>
var audio = document.getElementById("audio");
audio.onended = function() {
setTimeout(function(){ window.location.href = ['http://kimluc.blogspot.com/2015/12/uong-xua-loi-cu-thanh-tuyen.html']}, 10000);
var hou = 0;
var sec = 10;
setInterval(function(){
var a = new Date();
document.getElementById("timer").innerHTML = hou +" : " + sec ;
sec--;
if(sec == 00)
{
hou--;
sec = 10;
if (hou == 0)
{
hou = 0;
}
}
},1000);
}

function resetTimer()
{
};
</script>

Trong đó,

- URL.mp3 là link trực tiếp dẫn đến tệp tin mp3 được lưu trữ trực tuyến trên internet ví dụ như: https://archive.org/download/album-nhac-mua-dong-tuyen-chon/Lien%20Khuc_%20Bai%20Thanh%20Ca%20Buon_%20Chuyen%20Tin%20%5bMP3%20320kbps%5d.mp3;

- http://kimluc.blogspot.com/2015/12/uong-xua-loi-cu-thanh-tuyen.html là link của 1 trang web mà trình duyệt sẽ tự động tải về sau khi tệp tin âm thanh phát xong.
0

[HTML] Phát hiện audio/ MP3 phát kết thúc và tự động thực thi 1 nhiệm vụ

Đoạn mã dưới đây dùng để phát hiện 1 bài hát hay 1 tệp tin mp3/ audio phát kết thúc và trình duyệt sẽ tự động thực thị một mệnh lệnh do bạn cài đặt trước như tự động tải trang kế tiếp, tự động thông báo âm thanh phát kết thúc,...

<audio id="audio" autoplay controls>
<source src="URL.mp3" type="audio/mpeg">
</audio>
<div>
<b>Kế tiếp: "Đường xưa lối cũ" trong <span id="timer">...</span> giây</b>
</div>
<script>
var audio = document.getElementById("audio");
audio.onended = function() {
setTimeout(function(){ window.location.href = ['http://kimluc.blogspot.com/2015/12/uong-xua-loi-cu-thanh-tuyen.html']}, 10000);
var hou = 0;
var sec = 10;
setInterval(function(){
var a = new Date();
document.getElementById("timer").innerHTML = hou +" : " + sec ;
sec--;
if(sec == 00)
{
hou--;
sec = 10;
if (hou == 0)
{
hou = 0;
}
}
},1000);
}

function resetTimer()
{
};
</script>

Trong đó,

- URL.mp3 là link trực tiếp dẫn đến tệp tin mp3 được lưu trữ trực tuyến trên internet ví dụ như: https://archive.org/download/album-nhac-mua-dong-tuyen-chon/Lien%20Khuc_%20Bai%20Thanh%20Ca%20Buon_%20Chuyen%20Tin%20%5bMP3%20320kbps%5d.mp3;

- http://kimluc.blogspot.com/2015/12/uong-xua-loi-cu-thanh-tuyen.html là link của 1 trang web mà trình duyệt sẽ tự động tải về sau khi tệp tin âm thanh phát xong.
0

[HTML] Phát hiện audio/ MP3 phát kết thúc và tự động thực thi 1 nhiệm vụ

Đoạn mã dưới đây dùng để phát hiện 1 bài hát hay 1 tệp tin mp3/ audio phát kết thúc và trình duyệt sẽ tự động thực thị một mệnh lệnh do bạn cài đặt trước như tự động tải trang kế tiếp, tự động thông báo âm thanh phát kết thúc,...

<audio id="audio" autoplay controls>
<source src="URL.mp3" type="audio/mpeg">
</audio>
<div>
<b>Kế tiếp: "Đường xưa lối cũ" trong <span id="timer">...</span> giây</b>
</div>
<script>
var audio = document.getElementById("audio");
audio.onended = function() {
setTimeout(function(){ window.location.href = ['http://kimluc.blogspot.com/2015/12/uong-xua-loi-cu-thanh-tuyen.html']}, 10000);
var hou = 0;
var sec = 10;
setInterval(function(){
var a = new Date();
document.getElementById("timer").innerHTML = hou +" : " + sec ;
sec--;
if(sec == 00)
{
hou--;
sec = 10;
if (hou == 0)
{
hou = 0;
}
}
},1000);
}

function resetTimer()
{
};
</script>

Trong đó,

- URL.mp3 là link trực tiếp dẫn đến tệp tin mp3 được lưu trữ trực tuyến trên internet ví dụ như: https://archive.org/download/album-nhac-mua-dong-tuyen-chon/Lien%20Khuc_%20Bai%20Thanh%20Ca%20Buon_%20Chuyen%20Tin%20%5bMP3%20320kbps%5d.mp3;

- http://kimluc.blogspot.com/2015/12/uong-xua-loi-cu-thanh-tuyen.html là link của 1 trang web mà trình duyệt sẽ tự động tải về sau khi tệp tin âm thanh phát xong.
0

[HTML5] Tạo danh sách phát (playlist) MP3 hoặc video tự động phát ngẫu nhiên

Giả sử bạn có 9 bài hát (mp3 hoặc video/mp4) là bài 1, bài 2, bài 3,..., bài 9 và bạn muốn phát các bài hát này một cách ngẫu nhiên không theo thứ tự mỗi khi người xem truy cập vào trang blog/ web của bạn giống như Zing radio, Nhưng Zing radio viết bằng Flash (bị hạn chế ở nhiều thiết bị chạy Android, iOS), ở đây mình viết bằng HTML5 (hỗ trợ hầu hết thiết bị chạy Windows, Android, iOS,...). Các đoạn mã sau đây sẽ giúp bạn thực hiện điều đó.

Xem minh họa: http://jsfiddle.net/fe7JL/192

<!DOCTYPE html>
<html>
<head>
<!--Shuffle-->
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

<!--Đường dẫn file javascript trên có thể thay thế bằng: https://ia601500.us.archive.org/20/items/audio-shuffle-jquery-1.7.2-jquery.min/audio-shuffle-jquery-1.7.2-jquery.min.js -->

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
for (var $x=$(".content li"), i=$x.length-0, 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 - 0;
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>

<!-- HTML5 audio player-->
<audio id="audio" preload tabindex="0" controls="" type="audio/mpeg" autoplay>
<source type="audio/mp3" src="https://archive.org/download/iPhone_7_ringtone_cutted/iPhone_7_ringtone_cutted.mp3">
Sorry, your browser does not support HTML5 audio.
</audio>

<!--End HTML5 audio player-->

<div id="n"></div>
<ul id="playlist" class="content">
<li class="active"><a href="https://archive.org/download/HaTrangElvisPhuong/HaTrang-ElvisPhuong.mp3">Ha trang - Elvis Phung</a></li>
<li><a href="https://archive.org/download/O.LaiThan.hHa/O.Lai-Than.hHa.mp3">Ở lại - Thanh Hà</a></li>
<li><a href="https://archive.org/download/ToiRuEmNguElvisPhuong/T%C3%B4i%20Ru%20Em%20Ng%E1%BB%A7-Elvis%20Ph%C6%B0%C6%A1ng.mp3">Tôi ru em ngủ - Elvis Phuong</a></li>
<li><a href="https://archive.org/download/MaHHngTuNNgcBgngKiBu/M%C6%B0a%20h%E1%BB%93ng%20-%20Tu%E1%BA%A5n%20Ng%E1%BB%8Dc-B%E1%BA%B1ng%20Ki%E1%BB%81u.mp3">Mưa hồng - Tuấn Ngọc, Bằng Kiều</a></li>
<li><a href="https://archive.org/download/NhCCnhVCBayKhynhLy/Nh%C6%B0%20C%C3%A1nh%20V%E1%BA%A1c%20Bay-Kh%C3%A1nh%20Ly.mp3">Như cánh vạc bay - Khánh Ly</a></li>
<li><a href="https://archive.org/download/MuaChieuKyNiemYPhuongQuocKhanh/MuaChieuKyNiem-YPhuong-QuocKhanh_rqyb.mp3">Mưa chiều kỷ niệm - Y Phương, Quốc Khánh</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="url.jpg" autoplay controls><source src="url.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 -> gõ notepad -> nhấn enter

Cũng đăng trên Timvn.blogspot.com
0

[HTML5] Tạo danh sách phát (playlist) MP3 hoặc video tự động phát ngẫu nhiên

Giả sử bạn có 9 bài hát (mp3 hoặc video/mp4) là bài 1, bài 2, bài 3,..., bài 9 và bạn muốn phát các bài hát này một cách ngẫu nhiên không theo thứ tự mỗi khi người xem truy cập vào trang blog/ web của bạn giống như Zing radio, Nhưng Zing radio viết bằng Flash (bị hạn chế ở nhiều thiết bị chạy Android, iOS), ở đây mình viết bằng HTML5 (hỗ trợ hầu hết thiết bị chạy Windows, Android, iOS,...). Các đoạn mã sau đây sẽ giúp bạn thực hiện điều đó.

Xem minh họa: http://jsfiddle.net/fe7JL/192

<!DOCTYPE html>
<html>
<head>
<!--Shuffle-->
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

<!--Đường dẫn file javascript trên có thể thay thế bằng: https://ia601500.us.archive.org/20/items/audio-shuffle-jquery-1.7.2-jquery.min/audio-shuffle-jquery-1.7.2-jquery.min.js -->

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
for (var $x=$(".content li"), i=$x.length-0, 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 - 0;
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>

<!-- HTML5 audio player-->
<audio id="audio" preload tabindex="0" controls="" type="audio/mpeg" autoplay>
<source type="audio/mp3" src="https://archive.org/download/iPhone_7_ringtone_cutted/iPhone_7_ringtone_cutted.mp3">
Sorry, your browser does not support HTML5 audio.
</audio>

<!--End HTML5 audio player-->

<div id="n"></div>
<ul id="playlist" class="content">
<li class="active"><a href="https://archive.org/download/HaTrangElvisPhuong/HaTrang-ElvisPhuong.mp3">Ha trang - Elvis Phung</a></li>
<li><a href="https://archive.org/download/O.LaiThan.hHa/O.Lai-Than.hHa.mp3">Ở lại - Thanh Hà</a></li>
<li><a href="https://archive.org/download/ToiRuEmNguElvisPhuong/T%C3%B4i%20Ru%20Em%20Ng%E1%BB%A7-Elvis%20Ph%C6%B0%C6%A1ng.mp3">Tôi ru em ngủ - Elvis Phuong</a></li>
<li><a href="https://archive.org/download/MaHHngTuNNgcBgngKiBu/M%C6%B0a%20h%E1%BB%93ng%20-%20Tu%E1%BA%A5n%20Ng%E1%BB%8Dc-B%E1%BA%B1ng%20Ki%E1%BB%81u.mp3">Mưa hồng - Tuấn Ngọc, Bằng Kiều</a></li>
<li><a href="https://archive.org/download/NhCCnhVCBayKhynhLy/Nh%C6%B0%20C%C3%A1nh%20V%E1%BA%A1c%20Bay-Kh%C3%A1nh%20Ly.mp3">Như cánh vạc bay - Khánh Ly</a></li>
<li><a href="https://archive.org/download/MuaChieuKyNiemYPhuongQuocKhanh/MuaChieuKyNiem-YPhuong-QuocKhanh_rqyb.mp3">Mưa chiều kỷ niệm - Y Phương, Quốc Khánh</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="url.jpg" autoplay controls><source src="url.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 -> gõ notepad -> nhấn enter

Cũng đăng trên Timvn.blogspot.com
0

[HTML] Tự động thực thi một nhiệm vụ sau khi video kết thúc - Phát hiện video phát kết thúc


Trang blog/ web của bạn chuyên về video và bạn muốn khi người xem xem xong một video clip trên một trang blog/ web thì trình duyệt sẽ tự động thực hiện một nhiệm vụ nào đó ví dụ như tự động tải trang có video tiếp theo. Bạn có thể tham khảo cách sau:

Xem minh họa: --> http://kimluc.blogspot.com/2017/04/em-tan-ben-ngu-ngoc-ha.html

<video id="myVideo" controls>
<source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4" />
</video>

<script>
var aud = document.getElementById("myVideo");
aud.onended = function() {
window.location.href = ['http://kimluc.blogspot.com/2017/04/em-tan-ben-ngu-ngoc-ha.html'];
};
</script>

Hiện thời gian báo trước khi tải trang video kế tiếp:
<video autoplay id="myVideo" controls width="630" height="380">
<source src="https://archive.org/download/Dentanbenngu_ngocha/%C4%90%C3%AAm%20t%C3%A0n%20b%E1%BA%BFn%20Ng%E1%BB%B1%20-%20Ng%E1%BB%8Dc%20H%E1%BA%A1.mp4" type="video/mp4" />
</video>
<div>
<b>Kế tiếp: "Đường xưa lối cũ" <span id="timer">...</span> giây</b>
</div>
<script>
var aud = document.getElementById("myVideo");
aud.onended = function() {
setTimeout(function(){ window.location.href = ['http://kimluc.blogspot.com/2015/12/uong-xua-loi-cu-thanh-tuyen.html']}, 16000);
var hou = 0;
var sec = 15;
setInterval(function(){
var a = new Date();
document.getElementById("timer").innerHTML = hou +" : " + sec ;
sec--;
if(sec == 00)
{
hou--;
sec = 15;
if (hou == 0)
{
hou = 0;
}
}
},1000);
}

function resetTimer()
{
};
</script>

Xem minh họa: --> http://kimluc.blogspot.com/2017/04/em-tan-ben-ngu-ngoc-ha.html
0

[HTML] Tự động thực thi một nhiệm vụ sau khi video kết thúc - Phát hiện video phát kết thúc


Trang blog/ web của bạn chuyên về video và bạn muốn khi người xem xem xong một video clip trên một trang blog/ web thì trình duyệt sẽ tự động thực hiện một nhiệm vụ nào đó ví dụ như tự động tải trang có video tiếp theo. Bạn có thể tham khảo cách sau:

Xem minh họa: --> http://kimluc.blogspot.com/2017/04/em-tan-ben-ngu-ngoc-ha.html

<video id="myVideo" controls>
<source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4" />
</video>

<script>
var aud = document.getElementById("myVideo");
aud.onended = function() {
window.location.href = ['http://kimluc.blogspot.com/2017/04/em-tan-ben-ngu-ngoc-ha.html'];
};
</script>

Hiện thời gian báo trước khi tải trang video kế tiếp:
<video autoplay id="myVideo" controls width="630" height="380">
<source src="https://archive.org/download/Dentanbenngu_ngocha/%C4%90%C3%AAm%20t%C3%A0n%20b%E1%BA%BFn%20Ng%E1%BB%B1%20-%20Ng%E1%BB%8Dc%20H%E1%BA%A1.mp4" type="video/mp4" />
</video>
<div>
<b>Kế tiếp: "Đường xưa lối cũ" <span id="timer">...</span> giây</b>
</div>
<script>
var aud = document.getElementById("myVideo");
aud.onended = function() {
setTimeout(function(){ window.location.href = ['http://kimluc.blogspot.com/2015/12/uong-xua-loi-cu-thanh-tuyen.html']}, 16000);
var hou = 0;
var sec = 15;
setInterval(function(){
var a = new Date();
document.getElementById("timer").innerHTML = hou +" : " + sec ;
sec--;
if(sec == 00)
{
hou--;
sec = 15;
if (hou == 0)
{
hou = 0;
}
}
},1000);
}

function resetTimer()
{
};
</script>

Xem minh họa: --> http://kimluc.blogspot.com/2017/04/em-tan-ben-ngu-ngoc-ha.html
0

HTML: Tự động thực thi một chức năng sau khi video kết thúc

Đoạn mã dưới đây sẽ ra lệnh cho trình duyệt tự động thực thi một nhiệm vụ, như tự tải một trang video mới, sau khi video trên trang hiện tại phát xong.

Thủ thuật gồn 2 tính năng: Tự động thực thi ngay khi video kết thúc và hẹn thời gian thực thi sau khi video kết thúc.

1. Tự tải trang tiếp theo ngay khi video kết thúc:

Xem minh họa: http://jsfiddle.net/fnrtqqsv/2/

Mã/ Code:

<video id="myVideo" controls>
<source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4" />
</video>

<script>
var aud = document.getElementById("myVideo");
aud.onended = function() {
window.location.href = ['http://timvn.blogspot.com/2015/04/thanh-pho-ngan-cay.html'];
};
</script>

Trong đó: http://timvn.blogspot.com/2015/04/thanh-pho-ngan-cay.html là đường dẫn (URL) của trang sẽ tự động tải tiếp theo sau khi video ở trang hiện tại phát xong.

2. Hẹn thời gian tải trang tiếp theo.

Xem minh họa: http://jsfiddle.net/fnrtqqsv/5/

Mã/ Code:

<video autoplay id="myVideo" controls>
<source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4" />
</video>
<div>
<b>Tự động tải video kế tiếp trong <span id="timer">…</span> phút</b>
</div>
<script>
var aud = document.getElementById("myVideo");
aud.onended = function() {
setTimeout(function(){ window.location.href = ['http://timvn.blogspot.com/2015/04/thanh-pho-ngan-cay.html']}, 16000);
var hou = 0;
var sec = 15;
setInterval(function(){
var a = new Date();
document.getElementById(“timer”).innerHTML = hou +" : " + sec ;
sec–;
if(sec == 00)
{
hou–;
sec = 15;
if (hou == 0)
{
hou = 0;
}
}
},1000);
}

function resetTimer()
{
};
</script>
0

Mã tạo playlist/ danh sách phát video (phim) hoặc MP3 cho blog/ web bằng HTML5

Trong trường hợp bạn cần nhúng nhiều video clip vào 1 bài đăng, bạn có thể nhúng các video theo thứ tự từ trên xuống dưới nhưng làm như thế thì không hay. Dưới đây là hướng dẫn tạo danh sách phát/ playlist để phát nhiều video clip trong 1 trình phát video trong một bài đăng của blog/ website bằng HTML5. Điều này giúp bạn có thể tạo 1 blog (blogger/blogspot) xem phim chẳng hạn.

Xem minh họa


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í.

4

Mã tạo danh sách phát/ playlist nhạc MP3 - MP3 playlist player code



Khi tạo một album nhạc tại Nhaccuatui.com, tôi muốn có trong album bài hát Cô láng giềng do ca sĩ Trần Thái Hòa thể hiện nhưng bài này không có trên Nhaccuatui (Tìm kiếm ngày 20-8-2013). Do đó, tôi tạo ra trình phát nhạc của riêng mình dựa dịch vụ của MP3 Player để tiện thêm vào bất cứ bài hát nào mình thích. Bạn có thể upload bài hát lên Kiwi6.com, sau đó đi đến trang lưu trữ bài hát bạn vừa upload để lấy đường dẫn (URL) của tệp tin chứa bài hát ở ngay dưới chữ Direct Hotlink: rồi dán vào đoạn mã tạo danh sách phát MP3 dưới đây:

<div class="player"> <object width="400" height="300" type="application/x-shockwave-flash" data="http://socplay.weebly.com/uploads/1/1/4/1/11413983/player_mp3_multi.swf"> <param name="movie" value="http://socplay.weebly.com/uploads/1/1/4/1/11413983/player_mp3_multi.swf"> <param name="FlashVars" value="mp3=http://k002.kiwi6.com/hotlink/oj4337y666/hoa_tim_ngoai_san--elvis_phuong.mp3|http://k002.kiwi6.com/hotlink/3i06y32mee/ha_trang--elvis_phuong.mp3|http://k002.kiwi6.com/hotlink/nf066ae74j/loi_cu_ta_ve--bang_kieu.mp3|http://k002.kiwi6.com/hotlink/2uj0ekc03t/tuoi_da_buon--elvis_phuong.mp3|http://k002.kiwi6.com/hotlink/33mw211744/dua_em_tim_dong_hoa_vang--khanh_linh.mp3|http://k002.kiwi6.com/hotlink/y2j47p3j97/thu_hat_cho_nguoi--quang_dung.mp3|http://k002.kiwi6.com/hotlink/q0cd9vl8c3/nhu_canh_vac_bay--hong_nhung.mp3|http://k002.kiwi6.com/hotlink/vw819kv0l0/ha_noi_dem_tro_gio--my_linh.mp3|http://k002.kiwi6.com/hotlink/vhab8warl5/lk_bon_mua.mp3|http://k002.kiwi6.com/hotlink/hlbqu07354/Chuyen_tinh_buon--sy_phu.mp3|http://k002.kiwi6.com/hotlink/bd730inc4f/nhin_nhung_mua_thu_di--elvis_phuong.mp3|http://k002.kiwi6.com/hotlink/y4cc1562lh/chuyen_hoa_sim_1--2--3--4.mp3&amp;autoplay=1&amp;width=400&amp;height=300&amp;showvolume=1&amp;title=Hoa tím ngoài sân - Elvis Phương|Hạ trắng - Elvis Phương|Lối cũ ta về - Bằng Kiều|Tuổi đá buồn - Elvis Phương|Đưa em tìm động hoa vàng - Khánh Linh|Thu hát cho người - Quang Dũng|Như cánh vạc bay - Hồng Nhung|Hà Nội đêm trở gió - Mỹ Linh|LK bốn mùa - Hải ngoại|Chuyện tình buồn - Sỹ Phú|Nhìn những mùa thu đi - Elvis Phương|LK nhạc vàng tuyển chọn - Hải ngoại&amp;bgcolor1=4da6a9&amp;bgcolor2=2d8689"> </object> </div>


    Trong đó:
  • http://k002.kiwi6.com/hotlink/oj4337y666/hoa_tim_ngoai_san--elvis_phuong.mp3 là URL tệp tin MP3 chứa bài hát Hoa tím ngoài sân do Elvis Phương trình bày được lưu trữ trực tuyến trên Kiwi6.com
  • | là ký tự nằm giữa hai URL tệp tin MP3 hoặc hai tiêu đề bài hát
  • Hoa tím ngoài sân - Elvis Phương là tiêu đề bài hát
  • autoplay=1 Tự động phát, =0 để đặt giá trị ngược lại
  • width=400 Trình phát rộng 400px
  • height=300 Trình phát cao 300px
  • showvolume=1 hiển thị thanh chỉnh âm
  • bgcolor1=4da6a9 Đặt giá trị màu nền cho đường viền trình phát
  • bgcolor2=2d8689 Đặt giá trị màu nền cho danh sách tiêu đề bài hát
Bản quyền @ Socplay.blogspot.com
0