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

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

[Free hosting] Đăng ký dịch vụ lưu trữ trực tuyến miễn phí dung lượng 39.984 GB

Qihoo 360 là một doanh nghiệp Trung Quốc nỗi tiếng được biết đến với các dịch vụ bảo mật, an ninh mạng, trình duyệt web, ứng dụng cho smartphone (giống BKAV ở Việt Nam) và lưu trữ trực tuyến. Nếu bạn có một con Android, chắc có lần bạn đã nhìn thấy ứng dụng 360 Security - Antivirus Boost trên Google Play Store. Nó là một sản phẩm của Qihoo 360.

Hãng này mới đây đã cung cấp một dịch vụ lưu trữ trực tuyến miễn phí (bất kỳ tệp tin như: video, mp3, hình ảnh, tài liệu văn bản, doc, TXT,...) với mỗi tài khoản đăng ký được cấp một ổ đĩa lưu trữ miển phí với dung lượng 39.984 GB (ba mươi chín nghìn chín trăm tám mươi bốn gigabyte).

Cho dù người Việt thường có tâm lý không tin tưởng vào các sản phẩm TQ nhưng nó đã được XDA-Developers hướng dẫn sử dụng như là một dịch vụ đáng tin cậy. Tuy nhiên, bạn nên dùng email phụ của bạn để đăng ký nếu bạn muốn thử với các bước sau:

Các dịch vụ lưu trữ Qihoo 360 bằng tiếng Trung Quốc, bạn có thể sử dụng công cụ dịch của trình duyệt trong khi sử dụng 360 Cloud Storage

1. Truy cập địa chỉ http://yunpan.360.cn/ để đăng ký tài khoản, sử dụng công cụ dịch của trình duyệt để dịch sang tiếng Việt khi đăng ký.

2. Sau khi khai báo email, mật khẩu, bạn nhấp vào nút Đăng ký tài khoản, một email xác minh địa chỉ email được gửi tới email của bạn. Sao chép link kích hoạt và dán vào họp nhập địa chỉ web của trình duyệt, nhấn enter, bạn có ngay 360 GB miễn phí.

3. Kế đến, truy cập vào địa chỉ http://down.360safe.com/yunpan/360wangpan_setup.exe để tải ứng dụng 360 Cloud Storage cài đặt trên Windows. Cài đặt xong, mở ứng dụng như hình bên dưới:


Bạn có thể thấy bài hát Tình lỡ - Khánh Ly đã được up lên host

4. Bạn nhấp vào nút có biểu tượng đám mây (như ảnh bên dưới) để đăng nhập.


Sau khi đăng nhập xong, bạn đã có 13 nghìn 360 GB (10.000 cho cài đặt ứng dụng + 360 khi đăng ký).

5. Cài đặt ứng dụng cho smartphone, bạn có thêm 26.624 GB:

a) Ứng dụng cho Android: http://down.360safe.com/yunpan/360yunpan_android.apk

b) Ứng dụng cho iOS: http://itunes.apple.com/cn/app/360yun-pan/id508401605?mt=8

c) Ứng dụng cho iPad: https://itunes.apple.com/cn/app/360yun-pan-hd/id566504735?mt=8

Sau khi cài đặt xong, mở ứng dụng ra rồi đăng nhập, bạn có thêm 26.624 GB lưu trữ miễn phí.

Vậy tất cả là 13.360 GB + 26.624 GB = 39.984 GB (ba mươi chín nghìn chín trăm tám mươi bốn gigabye).

6. Nếu dùng điện thoại Android, bạn nên tải tệp 360yunpan_v3.3.2.apk trên XDA Developers về cài đặt cho dễ sử dụng với giao diện tiếng Anh.
2

[HTML5] Hiển thị nội dung ngẫu nhiên V3.0

Giả sử bạn có một trang blog và bạn muốn mỗi lần bạn bè truy cập vào trang blog này họ nhìn thấy một thông điệp, một câu danh ngôn, một bài hát, một video clip,... khác nhau, không lần nào giống lần nào hay còn gọi là ngẫu nhiên.

Hơn thế nữa, bạn có thể tùy chỉnh theo ý muốn. Ví dụ: mỗi lần truy cập vào một bài đăng trên blog của bạn, bạn bè của bạn nghe 50 bài hát nhạc trẻ nhưng lần sau (cũng truy cập vào bài đăng này), họ lại nghe 50 bài hát trữ tình. Lần sau, họ lại nghe 50 bài rock cuồn nhiệt,... Thật dễ dàng với mã nguồn dưới đây:

Xem minh họa (yêu cầu trình duyệt hỗ trợ HTML5):

1. Ngẫu nhiên văn bản: http://jsfiddle.net/kimthuy900/w4x2bxkd/4/ (mỗi lần tải lại trang bạn sẽ thấy nó hiển thị tên một thành phố khác nhau)

2. Ngẫu nhiên bài hát (MP3/ HTML5): http://jsfiddle.net/kimthuy900/w4x2bxkd/5/ (mỗi lần tải lại trang bạn sẽ thấy nó hiển thị một bài hát khác nhau)

<!DOCTYPE html>
<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
$('#randomize li').each(function(){
$(this).hide();
});
var min = 0;
var max = $('#randomize li').length;
var randomLi = Math.floor(Math.random() * (max - min)) + min;
$('#randomize li').eq(randomLi).show();
});
</script>

</head>

<body>

<div class="alert alert-success well">
<h3>Danh sách ngẫu nhiên</h3>
<strong id="whichLi"></strong>
<ul id="randomize">
<li> <span class="whichLi"></span>Sài Gòn </li>
<li> <span class="whichLi"></span>Hải Phòng </li>
<li> <span class="whichLi"></span>Đà Nẵng </li>
<li> <span class="whichLi"></span>Cần Thơ </li>
<li> <span class="whichLi"></span>Hà Nội </li>
<li> <span class="whichLi"></span>Vũng Tàu </li>
<li> <span class="whichLi"></span>Nha Trang </li>
<li> <span class="whichLi"></span>Hội An </li>
</ul>
</div>

</body>

</html>

- Bạn có thể kết hợp phương pháp này với phương pháp này để trông nó chuyên nghiệp hơn.

- Để chạy nhiều bài hát bạn tạo nhiều playlist, mỗi playlist có nhiều bài, nhúng mỗi playlist vào một bài đăng. Sau đó dùng <iframe> để nhúng các bài đăng này vào bài đăng chính của bạn (ví dụ: Bạn đặt tên bài đăng chính này là Kênh âm nhạc bất tận) bằng cách thay chữ Sài Gòn, Đà Nẵng, Hà Nội,... bằng mã nhúng iframe. Như vậy, mỗi khi truy cập vào bài đăng Kênh âm nhạc bất tận (ở trang chủ chẵng hạn), trình duyệt chỉ hiển thị một playlist, nhưng khi vào lại nó sẽ hiển thị một playlist khác,...
0

[HTML5] Tạo danh sách (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/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
3

Tạo tệp tin m3u playlist


Mở cmd lên: Start->Run. Gõ vào chữ notepad rồi nhấn Enter. Chương trình notepad sẽ chạy.

Gõ vào nội dung như sau:

@echo off
dir /o:n /b *.mp3 > Playlist.m3u

Sau đó lưu lại file này với tên có định dạng là tenfile.bat ( ví dụ MakeM3U.bat), nhớ đặt file này vào thư mục chứa list file mp3.

Sau đó chỉ cần click đúp chuột vào file bat trên và ta sẽ có file Playlist.m3u.
Enjoy!

hoaihuong8x.wordpress.com
0

[HTML5] Phương pháp hiển thị nội dung một các ngẫu nhiên V2.1

Giả sử bạn có 9 bài hát (bài 1, bài 2, bài 3,..., bài 9) và bạn muốn hiển thị các bài hát này một 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. Các đoạn mã sau đây sẽ giúp bạn thực hiện điều đó.

Xem thêm: - [HTML5] Phương pháp hiển thị nội dung một cách ngẫu nhiên V1.1

- [HTML5] Tạo danh sách (playlist) Audio/ video tự động phát ngẫu nhiên

1/ Sao chép và dán đoạn mã dưới đây vào sau thẻ <head> hoặc trước thẻ </head>:

<!--js 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 js shuffle-->
<!--js playlist-->
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<style type='text/css'>
#playlist {
display:table;
}
#playlist li{
cursor:pointer;
padding:8px;
}

#playlist li:hover{
color:blue;
}
#videoarea {
float:left;
width:500px;
height:300px;
margin:10px;
border:1px solid silver;
}
</style>
<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 js playlist-->

2/ Để hiển thị bài hát một cách ngẫu nhiên bạn sử dụng mã dưới đây, đặt trong <body> hay trong bài viết biên tập bằng HTML

<audio id="videoarea" controls="controls" poster="" src="" autoplay="true"></audio>
<div id="n"></div>
<ul id="playlist" class="content">
<li movieurl="http://k007.kiwi6.com/hotlink/pq6y6ubt5j/M_t_c_i_i_v_-_ElvisPhuong.mp3">Một cõi đi về</li>
<li movieurl="http://k007.kiwi6.com/hotlink/w3ecw48j3i/Di_m_x_a_-_ElvisPhuong.mp3">Diễm xưa</li>
<li movieurl="http://k007.kiwi6.com/hotlink/car0d545el/H_Tr_ng-ElvisPhuong.mp3">Hạ trắng</li>
<li movieurl="http://k007.kiwi6.com/hotlink/xxtwx81vxf/T_i_ru_em_ng_-ElvisPhuong.mp3">Tôi ru em ngủ</li>
</ul>

Giờ đây, bạn có thể phát triển thêm để hoàn thiên playlist (Danh sách phát) của bạn bằng cách thay đổi mã tạo playlist nằm trong đoạn này: <!--js playlist-->... <!--end js playlist-->

Trên internet có rất nhiều trang mạng hướng dẫn tạo playlist. Chúc bạn thành công!
0

[HTML5] Phương pháp hiển thị nội dung một cách ngẫu nhiên V1.1

Giả sử bạn có dãy số 1, 2, 3, 4, 5, 6, 7, 8, 9 hay 9 bài hát (bài 1, bài 2, bài 3,..., bài 9) và bạn muốn hiển thị dãy số hay các bài hát này một 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. Các đoạn mã sau đây sẽ giúp bạn thực hiện điều đó.

1/ Sao chép và dán đoạn mã dưới đây vào sau thẻ <head> hoặc trước thẻ </head>

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

2.a/ Để hiển thị dãy số một cách ngẫu nhiên, bạn viết đoạn mã dưới đây trong trình biên tập bài đăng bằng HTML

<div id="n"></div>
<ul class="content">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>

Xem minh họa: http://fiddle.jshell.net/fe7JL/3/show/ (Nhấp vào nút tải lại của trình duyệt, mỗi lần tải lại bạn sẽ thấy dãy số hiển thị một các khác nhau.

2.b/ Để hiển thị nội dung khác như bài hát chẵng hạn thì bạn thay 1, 2, 3, 4,... bằng mã nhúng bài hát từ Nhaccuatui, Zing MP3,.... Xem minh họa: http://fiddle.jshell.net/fe7JL/133/show/
0

[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/AVvXsEjQbsrpYoc2P5cOr6xRBgkHFfgneyEohLjISReSNi3gneiIpETAFhIotxdX-Zrv2jxgK_L5suEN8DPgfM5r770xcZKEu12-T7ZaRnKstiVcOYoVpLzn29oZ1-P9vWFuZE62vZ6hSmGz4n0s/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.
0

Tùy chỉnh kích thước, vị trí trang web nhúng vào blog/ website bằng thẻ Iframe

Vì một lí do nào đó mà bạn muốn nhúng một trang web, đường dẫn (URL) vào blog, website của bạn và bạn muốn tùy chỉnh vị trí trang web mà bạn muốn nó sẽ hiển thị trên blog/ website của bạn khi nó được nhúng.

Chẵng hạn, bạn muốn nhúng một trang phát nhạc dành cho smartphone như http://m.mp3.zing.vn/ nhưng trang này không cung cấp mã nhúng cho bạn, bạn phải nhúng nó bằng Iframe.


Xem thêm:
- [HTML5] Phương pháp hiển thị nội dung một cách ngẫu nhiên V1.1

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


Dùng thẻ div để thực hiện điều đó (Dĩ nhiên chúng ta chỉ nên nhúng những trang mà nó cho phép nhúng, những trang không cho phép nhúng nó có cài sẵn mã chống nhúng nên dù bạn có muốn cũng không nhúng được):

<center><div style="width: 1000px; height: 100%;" align="left" scrolling="no">
<div id="frameContainer" style="overflow:hidden;">
<iframe src="website-url" scrolling="no" style="width: 950px; height: 1000px; margin-top: -350px; margin-left: -3px; margin-right: -400px;" frameborder="0"></iframe></div></div></center>

Chỉnh sửa các giá trị in đậm cho phù họp.

1. width: 1000px; height: 100% là chiều rộng, chiều cao của vùng mà trang web sẽ được nhúng vào. Bạn phải đặt giá trị chiều rộng, chiều cao của vùng để nhúng bằng hoặc lớn hơn chiều rộng, chiều cao gốc của trang web được nhúng để nó hiển thị đầu đủ nội dung. Sau đó ta ẩn đi những nội dung mà ta muốn nó sẽ không hiển thị.

2. Ẩn các nội dung mà bạn muốn nó không hiển thị khi được nhúng:

a. width: 950px; height: 1000px là chiều rộng, chiều cao gốc của trang web được nhúng. Bạn phải đặt đúng giá trị chiều rộng, chiều cao gốc của trang được nhúng để nó hiển thị đầy đủ nội dung.

b. margin-top: -350px: Ẩn header của trang web được nhúng tính từ đầu trang trở xuống 350px.

c. margin-left: -3px: Ẩn bên trái trang web được nhúng 3px.

d. margin-right: -400px: Ẩn bên phải trang được nhúng 400px.

e. margin-bottom: -300px: Ẩn phía dưới trang được nhúng 300px.

f. website-url: Địa chỉ trang web được nhúng.

g. scrolling="no": Ẩn thanh trượt.

h. frameborder="0": Đường kẻ khung bằng 0px.

Xem minh họa: (Nhúng một trang trên m.mp3.zing.vn có địa chỉ http://m.mp3.zing.vn/album/Mua-Thu-Niu-Buoc-Em-Ve-Trang-Nhung/ZWZA7F7D.html) bằng đoạn mã như bên dưới:

<center>
<div style="width: 100%; height: 100%;" align="left" scrolling="no">
<div id="frameContainer" style="overflow:hidden;">
<iframe src="http://m.mp3.zing.vn/bai-hat/Mua-Thu-Niu-Buoc-Em-Ve-Trang-Nhung/ZW6UA6UB.html" scrolling="no" style="width: 100%; height: 1000px; margin-top: -45px; margin-left: -0px; margin-right: -0px;" frameborder="0"></iframe></div>
</div>
</center>

Kết quả:

2