Đưa Radio vào Blog

Ngày Thứ Bảy, 25 tháng 2, 2012 Blog của Báo Mới Hà Nội chia sẻ với bạn đọc bài viết Đưa Radio vào Blog
Chúc bạn xem tin tức vui vẻ !!

Đáp ứng yêu cầu của giáo xứ phú giáo, mình xin giới thiệu các bạn một thủ thuật rất hay đó là "Đưa Radio vào blog". Thủ thuật này giúp cho blog có thêm tiện ích nghe đài từ một số kênh của VOV...

DEMO

Style CSS :

<style>
    .radio{padding-top: 5px; border: 1px dashed #cccccc; width: 430px; position: fixed; bottom: 20px; right: 0px;}
    li{list-style:none;float:left; margin-left: 10px; padding: 5px;}
    li:hover{background-color: #494949; box-shadow: 1px 0px 3px;}
    li:active{box-shadow: 2px 1px 3px;}

    li.p{margin-left:30px; color: green; box-shadow: 2px 0px 3px 1px;}
    li.p:hover{background:none;}
    li.p span{text-decoration:blink;}

    a{text-decoration:none; color: #888888; font-size: 12px;}
    #player{margin-top:20px;}
</style>

Đài của mình..

<div class="channel">
    <li><a href="javascript:radio('vov1')">VOV1</a></li>
    <li><a href="javascript:radio('vov2')">VOV2</a></li>
    <li><a href="javascript:radio('vov3')">VOV3</a></li>
    <li><a href="javascript:radio('vov4')">VOV4</a></li>
    <li><a href="javascript:radio('vov5')">VOV5</a></li>
    <li id="pl" class="p"></li>
</div>
    <div id="player">Radio23h - Blog Radio, chia sẻ xúc cảm cuộc sống</div>
</div>

Code JavaScript:

<script>
function radio(channel){
    var data = '<embed width="430" height="24" flashvars="&amp;file='+channel+'.flv&amp;streamer=rtmp://123.30.50.46:8080/live&amp;skin=&amp;autostart=true" allowfullscreen="true" allowscriptaccess="always" quality="high" name="mpl" id="mpl" style="undefined" src="http://player.longtailvideo.com/player5.9.swf" type="application/x-shockwave-flash">';

    document.getElementById("player").innerHTML = data;
    document.getElementById("pl").innerHTML = channel+" playing<span>...</span>";
    }
radio('vov3');
</script>

radio('vov3') ==> là đài mặc định bạn chạy đầu tiên.

Chúc các bạn thành công !!!