3 thg 9, 2011

Đưa truyền hình trực tuyến lên Google Blogger theo kiểu chọn kênh

Theo yêu cầu của nhiều bạn muốn được sử dụng truyền hình trực tuyến theo kiểu chọn kênh như có trên Thủ Thuật Blog. Bài viết này tôi sẽ giúp bạn làm một chương trình truyền hình trực tuyến hay kênh âm nhạc cho đọc giả của bạn có thể chọn kênh hoặc bài hát được liệt kê sẵn. Làm hướng dẫn này tốn nhiều thời gian và chính bản thân tôi mất hơn 6h cho việc tìm hiểu code, sưu tầm các logo và nhất là tìm kiếm link phát truyền hình trực tuyến của nhà đài. Chúng ta sẽ bắt đầu qua 4 bước chính.

Bước 1: Đoạn mã điều khiển đổi kênh

Mỗi lần chọn kênh, blog của bạn không phải tải lại việc này điều khiển bởi một đoạn JavaScript. Đây chính là đoạn mã bạn cần: changesource.js, nhấn phải chuột chọn Save Link As ... (Mozilla Firefox) hoặc Save Target As ... (Internet Explorer) tải về máy và lưu file này lên Google Pages để lấy link đưa vào đoạn code dưới.

<script src='LINK_ĐẾN_FILE.JS' type='text/javascript'/>
Hoặc
<script src='LINK_ĐẾN_FILE.JS' type='text/javascript'></script>

Và chèn đoạn mã này vào giữa hay thẻ <body> và </body> trong Edit HTML (Chỉnh sửa HTML) hoặc nhiều vị trí khác. Nếu chưa hiểu cách dùng tệp tin .js xin xem thêm hướng dẫn.

Bước 2: Đoạn mã trong iframe

Hãy copy hết đoạn mã trong hộp sau vào Notepad (Start -> All Programs -> Accessories -> Notepad) lưu thành tệp tin .html và đưa lên Google Pages để lấy link dùng cho bước kế tiếp.

Trong đó nguồn phát chương trình được tô đậm là kênh bạn chọn trước sẽ được mở đầu tiên khi trang vừa hiển thị. Bạn có thể thay bằng kênh khác tìm bên dưới. Cách lưu thành tệp tin này giống như lưu thành tệp tin .wpl.

<html>
<body>

<OBJECT id=winMediaPlayerID
 codeBase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715
 type=application/x-oleobject height=346
 standby="Loading Microsoft Windows Media Player components..."
 width=385 classid=CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6
 name=winMediaPlayer >     
<PARAM NAME="URL" VALUE="mms://www.vtc.com.vn:556/VTC5_05">
<PARAM NAME="rate" VALUE="1"><PARAM NAME="balance" VALUE="0">
<PARAM NAME="currentPosition" VALUE="0">
<PARAM NAME="defaultFrame" VALUE="0">
<PARAM NAME="playCount" VALUE="1">
<PARAM NAME="CursorType" VALUE="-1">
<PARAM NAME="autoStart" VALUE="1">
<PARAM NAME="currentMarker" VALUE="0">
<PARAM NAME="invokeURLs" VALUE="-1">
<PARAM NAME="volume" VALUE="50">
<PARAM NAME="mute" VALUE="0">
<PARAM NAME="stretchToFit" VALUE="-1">
<PARAM NAME="windowlessVideo" VALUE="0">
<PARAM NAME="enabled" VALUE="1">
<PARAM NAME="fullScreen" VALUE="0">
<PARAM NAME="enableErrorDialogs" VALUE="0">
<embed type="application/x-mplayer2" id="winMediaPlayerID" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
src="mms://210.245.126.153/VTV3/"
name=MediaPlayerTV
width="385"
height="346"
AutoSize="1"
AutoStart="1"
ClickToPlay="1"
DisplaySize="1"
EnableContextMenu="1"
EnableFullScreenControls="1"
EnableTracker="1"
Mute="0"
PlayCount="1"
ShowControls="1"
ShowAudioControls="1"
ShowDisplay="0"
ShowGotoBar="0"
ShowPositionControls="1"
ShowStatusBar="1"
ShowTracker="1">
</embed>
</OBJECT>

</body>
</html>

Bước 3: Hiển thị nội dung tệp tin ở bước 2 bằng iframe

Sau khi đã đưa lên lấy link và chúng ta sẽ tạo một iframe (một trang web nằm trong trang web khác) được đặt nằm giữa <div id="MediaPlayer"> và </div> như sau:
<div id="MediaPlayer">
<iframe marginwidth="0" marginheight="0" src="LIÊN_KẾT_ĐẾN_FILE.HTML_TẠO_Ở_BƯỚC_2" frameborder="0" height="346" scrolling="no" width="385"></iframe></div>
Nếu quan sát mã nguồn blog của tôi bạn sẽ thấy:
<div id="MediaPlayer" align="center">
<iframe marginwidth="0" marginheight="0" src="http://d.v.nhan.googlepages.com/tvovtv3.html" frameborder="0" height="346" scrolling="no" width="385"></iframe></div>

Trong đó kích thước (height và width) có thể thay đổi theo ý thích của mình hoặc giữ lại. Sau đó sử dụng đoạn mã trên chèn vào tiện ích HTML/JavaScript của Blogger hay chèn thẳng vào bài viết hoặc nơi mà bạn muốn kênh truyền hình hiển thị và kèm theo danh sách kênh bên dưới.

Bước 4: Đoạn code chọn kênh

<a href="#" onclick="changeSource('LINK_KÊNH_TRUYỀN_HÌNH_HOẶC_TỆP_TIN_MEDIA')">TÊN_KÊNH</a>

Nếu muốn dùng ảnh thay TÊN_KÊNH. Bạn có thể lấy các ảnh được làm sẵn có trong truyền hình trực tuyến của Thủ Thuật Blog. Vì băng thông của Photobucket trên tài khoản của tôi có hạn nên bạn hãy lưu các hình này vào tài khoản của bạn.

<a href="#" onclick="changeSource('LINK_KÊNH_TRUYỀN_HÌNH_HOẶC_TỆP_TIN_MEDIA')"><img border="0" src="LINK_ĐẾN_ẢNH_KÊNH_TRUYỀN_HÌNH"</a>
Đoạn code này đặt vào nơi thuận tiện để đọc giả của bạn có thể chọn kênh khác dễ dàng.

Danh sách các kênh truyền hình trực tuyến:
  1. Phim trực tuyến Tuổi Trẻ Online: mms://media.tuoitre.com.vn/BroadCast
  2. Tuổi Trẻ Video Online: http://www3.tuoitre.com.vn/media/PlayList.aspx?TVO=-1
  3. Truyền hình Thanh Niên: http://www3.tuoitre.com.vn/media/PlayList.aspx?THTN=-1
  4. TV Info: mms://222.255.31.252/InfoTVChannel
  5. VTV1: mms://210.245.126.153/VTV1/
  6. VTV2: mms://210.245.126.153/VTV2/
  7. VTV3: mms://210.245.126.153/VTV3/
  8. VTV4: mms://210.245.126.153/VTV4/
  9. HTV7: mms://203.210.215.251/HTV7
    10. (Cập nhật 31/12/2007)
  10. HTV9: mms://203.210.215.251/HTV9
    11. (Cập nhật 31/12/2007)
  11. VTC1: rtsp://www.vtc.com.vn:556/VTC1_01
  12. VTC2: rtsp://www.vtc.com.vn:556/VTC2_02
  13. VTC3: rtsp://www.vtc.com.vn:557/VTC3_03
  14. VTC4: rtsp://www.vtc.com.vn:556/VTC4_04
  15. VTC5: rtsp://www.vtc.com.vn:556/VTC5_05
  16. Hà Nội TV: rtsp://203.162.1.181/HTV
  17. Đồng Nai 1: rtsp://www.dongnai.gov.vn/dn1
  18. Đồng Nai 2: rtsp://www.dongnai.gov.vn/dn1
  19. TH Vĩnh Long: mms://210.245.121.111/thvl
  20. VietNamNet TV: rtsp://tv.vietnamnet.vn/live
Các kênh radio trực tuyến:
  1. VOV1: rtsp://210.245.0.62/vov1
  2. VOV2: rtsp://210.245.0.62/vov2
  3. VOV3: rtsp://210.245.0.62/vov3
  4. VOV6: rtsp://210.245.0.62/vov6
  5. VOH FM 99MHz: http://www.voh.com.vn/data/sound/20070313084600FMLSX07h00p110307QC.mp3
  6. Bình Dương: rtsp://203.162.163.37/fm

Ngoài ra, có thể thêm các kênh quốc tế bằng việc "mổ xẻ" trang www.wwitv.com. Nếu rành về PhotoShop chúng ta có thể đưa logo các kênh lên cùng một ảnh và mỗi vùng trên ảnh này có logo tương ứng với mỗi kênh sẽ có một link kết nối đến kênh đó. Cách này rất thuận tiện vì chỉ cần một ảnh cho tất cả các kênh.

Hướng dẫn đến đây là kết thúc. Tuy nhiên nếu bạn muốn có thêm thông báo đang kết nối truyền hình hoặc thông báo truyền hình không phát vào lúc đọc giả xem thì hãy đọc tiếp bước 5.

Bước 5: Thông báo "đang kết nối" và "báo lỗi"

Chỉ cần dùng đoạn code sau lưu lại thành file .asx và đưa lên Google Pages. Thay vì đặt link trực tiếp, mỗi kênh bạn tạo một tệp tin .asx riêng và kèm theo hình ảnh thông báo đang kết nối cũng như báo lỗi.

Hãy thử xem truyền hình trên Thủ Thuật Blog bạn sẽ thấy nó xuất hiện như thế nào. Sẽ có thông báo kết nối khi chọn kênh mới hay báo lỗi nếu kênh đó không phát hoặc link nguồn sai.

<ASX version = "3.0">
<entry clientskip="no" skipifref="no">
<REF HREF="LINK_HÌNH_BÁO_ĐANG_KẾT_NỐI"/><PARAM NAME="ShowWhileBuffering" VALUE="true"/>

</entry>
<entry clientskip="no" skipifref="no">
<Ref href = "LINK_KÊNH_TRUYỀN_HÌNH"/>
</entry>
<entry clientskip="no" skipifref="no"><REF HREF="LINK_HÌNH_BÁO_LỖI"/><DURATION VALUE="10:00:03.00"/><PARAM NAME="ShowWhileBuffering" VALUE="true"/></entry></ASX>

Ví dụ
<ASX version = "3.0">
<entry clientskip="no" skipifref="no">
<REF HREF="http://i240.photobucket.com/albums/ff259/thuthuatblog/posts/ttb_tvol_logo.gif"/><PARAM NAME="ShowWhileBuffering" VALUE="true"/>

</entry>
<entry clientskip="no" skipifref="no">
<Ref href = "mms://210.245.0.62/vov1"/>
</entry>
<entry clientskip="no" skipifref="no"><REF HREF="http://i240.photobucket.com/albums/ff259/thuthuatblog/posts/ttb_tvol_error.gif"/><DURATION VALUE="10:00:03.00"/><PARAM NAME="ShowWhileBuffering" VALUE="true"/></entry></ASX>

Bạn có thể làm các hình này bằng cách tham khảo các hình Thủ Thuật Blog đã làm: đang kết nối, báo lỗi.

Hãy để lại comments phía dưới bài viết giúp mọi người tham khảo cách làm của bạn nhé!

Chúc thành công!

http://www.thuthuatblog.com/2007/12/truyn-hnh-trc-tuyn-ln-google-blogger.html
Người đăng: vào lúc
Nhãn:

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)