Hướng dẫn tạo Playlist video với Flash Video Player - Asp.net C#

Tạo  Flash Video Player để chạy video clip trên website là chủ đề hay và cũng có nhiều bạn hỏi về vấn đế này. Bài viết này hướng dẫn bạn sử dụng Video Player của longtailvideo đề mô bằng việc xây dựng một Play list với các video được lấy từ Youtube. Demo

Nếu bạn dạo qua http://www.longtailvideo.com/support/jw-player-setup-wizard?example=205  bạn sẽ thấy có rất nhiều lựa chọn trong đó có lựa chon chạy Player với một youtube video , mã sẽ như sau

<script type='text/javascript' src='jwplayer.js'></script>
 
<div id='mediaspace'>This text will be replaced</div>
 
<script type='text/javascript'>
  jwplayer('mediaspace').setup({
    'flashplayer': 'player.swf',
    'file': 'http://www.youtube.com/watch%3Fv%3DHIrMIeN5ttE',
    'controlbar': 'bottom',
    'width': '470',
    'height': '320'
  });
</script>

Đoạn mã trên dùng để show Video lên thẻ <div id='mediaspace'> với thư viện jwplayer.js cung cấp sẵn để thực hiện việc setup :jwplayer('mediaspace').setup({... Ở đoạn mã trên bạn lưu ý đến thuộc tính file 'file': 'http://www.youtube.com/watch%3Fv%3DHIrMIeN5ttE', chính là link video trên youtube. Từ đó chúng ta có ý tưởng là tạo ra Player chạy 1 list danh sách bài hát lấy link video từ youtube.com và được lưu trong file XML . Dùng hàm ajax của jquery duyệt qua danh sách đó và show ra video tương ứng với bài hát mình chọn khi click vào Playlist. Các bạn có thể download thư viện và demo cuối bài viết
Ý tưởng như sau:
1. Hiện Video đầu tiên khi load trang
2. Hiển thị Playlist trên Gridview đọc nguồn từ xml file để cho thuận tiện cho việc phân trang (Các bạn có thể lựa chọn cách hiển thị khác )
3. Click vào mỗi link của Playlist sẽ không bị PostBack và hiển thị lên Player luôn video được chọn
Ta sẽ viết 2 hàm javascript
1. function showVideoObject(path) : Để show video theo path là link video được truyền vào
2. function showVideo(pathURL) :Sử lý nếu showVideo(0) - Hiện Video đầu tiên khi load trang còn lại sẽ hiện video tương ứng với mình chon trên Playlist
Các Bước thực hiện như sau :

1. Tạo File để lưu list Video từ youtube ở đây mình đặt là tv.xml

<stty>
    <I>
    <Id>35638</Id>
        <T><![CDATA[Liên Khúc Tuấn Vũ]]></T>
        <P>http://www.youtube.com/watch?v=WvRIzpSmBWk</P>       
    </I>
    <I>
    <Id>35546</Id>
        <T><![CDATA[hãy về đây bên anh]]></T>
        <P>http://www.youtube.com/watch?v=-Hj86-YHwh8</P>   
    </I>
  <I>
    <Id>35647</Id>
    <T><![CDATA[Giấc mộng vô hình]]></T>
    <P>http://www.youtube.com/watch?v=dwQq0-OakQU</P>
  </I>
  <I>
    <Id>35548</Id>
    <T><![CDATA[Khi em xa anh]]></T>
    <P>http://www.youtube.com/watch?v=1ijzmu-ofkA</P>
  </I>
  <I>
    <Id>35649</Id>
    <T><![CDATA[Nhớ Em - Minh Vương]]></T>
    <P>http://www.youtube.com/watch?v=n99ZFnvOs8o</P>
  </I>
  <I>
    <Id>35550</Id>
    <T><![CDATA[hãy về đây bên anh]]></T>
    <P>http://www.youtube.com/watch?v=-Hj86-YHwh8</P>
  </I>
  <I>
    <Id>35651</Id>
    <T><![CDATA[Vì sao cuối trời]]></T>
    <P>http://www.youtube.com/watch?v=BNIOcR1q0rM</P>
  </I>
  <I>
    <Id>35552</Id>
    <T><![CDATA[stty]]></T>
    <P>http://www.youtube.com/watch?v=eW9PZ4UHeXw</P>
  </I>
</stty>

2. Trong trang .aspx

<asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
     <div class="player">
        <div id='mediaspace'>
            This text will be replaced</div>
        <div id="list_player" > 
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                       <asp:GridView ID="GdvPlayer" runat="server" AutoGenerateColumns="False"
                        GridLines="None" ShowHeader="False" Width="100%"
                AllowPaging="True" onpageindexchanging="GridView1_PageIndexChanging"
                PageSize="4" CellPadding="0" >
                        <Columns>
                            <asp:TemplateField>
                                <ItemTemplate>
                                   <li><a href="javascript:void(0);" onclick="javascript:showVideo('<%# Eval("P") %>');"><%# Eval("T") %></a></li>
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
            </ContentTemplate>
            </asp:UpdatePanel>
                             
        </div>

3. Định dạng style css cho Player

<style type="text/css">
        body
        {
            margin: 0px;
            padding: 0px;
        }
          .player ul, li
        {
            padding: 0;
            list-style: none;
             
        }
       .player li a
        {
            display: block;           
            text-decoration: none;
            color: #000;
        }       
       .player li a:hover
        {
            background: #C15;
            color: #FFF;
        }
        .player
        {
            margin: 0 auto; 
            width: 349px;
          
        }   
         #list_player
        {           
            padding:3px 0px;            
        }     
              
          #list_player li a
        {           
            padding-left:10px;
        }
    </style>

4. Link các thư viện js và viết 2 hàm showVideoObject ,showVideo

<script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="jwplayer.js"></script>
    <script language="javascript" type="text/javascript">    
        var IsFirstItem = true;      
        function showVideoObject(path) {  //Hàm để write ra Player      
                    jwplayer('mediaspace').setup({
                    'flashplayer': 'player.swf',
                    'file': path,
                    'controlbar': 'bottom',
                    'width': '470',
                    'height': '320'
                  });       
       }       
        function showVideo(pathURL) {
            //viet Ajax JQuery de lay du lieu tu File XML ve           
            $.ajax({
                type: "GET", //method
                url: "tv.xml", //file XML Source
                dataType: "xml", //data response type
                success: function(xml) {
                    var strOut = "";
                    $(xml).find("I").each(function() {
                        var ID = $(this).find("Id").text(); //get VideoID
                        var Title = $(this).find("T").text(); //get Title of Video
                        var Path = $(this).find("P").text(); //get video source                  
                        
                        if (pathURL == 0) {// Hiển thị video đầu tiên khi load trang
                            if (Title != "" && Path != "") {
                                if (IsFirstItem) {
                                    showVideoObject(Path);
                                    IsFirstItem = false;
                                }
                            }
                        } else if (pathURL != 0) {
                            
                            if (Title != "" && Path != "") {                               
                                if (pathURL == Path) {                                  
                                    
                                    //neu path của Item (dang duyet) == voi pathURL chung ta truyền vao thi se Show Video tương ứng đó
                                    showVideoObject(Path);
                                } 
                            }
                        }
                    });
                }
            });
        }
        $(document).ready(function() {
            showVideo(0);
        });    
    </script>

5. cuối cùng bạn viết code cho hiển thị Playlist trên Gridview và thực hiện phân trang

DataSet ds = new DataSet();
    protected void Page_Load(object sender, EventArgs e)
    {
        ds.ReadXml(Server.MapPath("tv.xml"));
        GdvPlayer.DataSource = ds.Tables[0];
        GdvPlayer.DataBind();       
 
    }
    protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        GdvPlayer.PageIndex = e.NewPageIndex;
        GdvPlayer.DataSource = ds.Tables[0];
        GdvPlayer.DataBind();
    }

Download Source bài viết  tại đây

Theo: vietshare.vn

Posted in: ASP.NET