Tin tức

Cách tạo Playlist video với Flash Video Player

23/10/2013

Rất nhiều các bạn trẻ hiện nay muốn tạo một Flashvideo Player để chạy video clip quảng cáo hay ca nhạc trên các trang blog hay website cho hấp dẫn và lôi cuốn. Vậy làm thế nào để tạo được một Flashvideo Player như vậy. Bài viết này sẽ giúp các bạn xây dựng Playlist với các video được lấy từ Youtube. Demo Playlish, Player,Plash video player, youtube, Asp.net, C#.

Trình tự các bước như sau:
1. Tạo File để lưu list Video từ youtube 

<stty>

    <I>

    <Id>35638</Id>

        <T><![CDATA[Liên Khúc TuấnVũ]]></T>

       <P>http://www.youtube.com/watch?v=WvRIzpSmBWk</P>      

    </I>

    <I>

    <Id>35546</Id>

        <T><![CDATA[hãy về đây bênanh]]></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 xaanh]]></T>

   <P>http://www.youtube.com/watch?v=1ijzmu-ofkA</P>

  </I>

  <I>

    <Id>35649</Id>

    <T><![CDATA[Nhớ Em - MinhVương]]></T>

   <P>http://www.youtube.com/watch?v=n99ZFnvOs8o</P>

  </I>

  <I>

    <Id>35550</Id>

    <T><![CDATA[hãy về đây bênanh]]></T>

   <P>http://www.youtube.com/watch?v=-Hj86-YHwh8</P>

  </I>

  <I>

    <Id>35651</Id>

    <T><![CDATA[Vì sao cuốitrờ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 bereplaced</div>

        <div id="list_player" >

            <asp:UpdatePanelID="UpdatePanel1" runat="server">

            <ContentTemplate>

                       <asp:GridViewID="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><ahref="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

<styletype="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

<scriptsrc="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 lieutu File XML ve          

            $.ajax({

                type: "GET", //method

                url: "tv.xml", //fileXML 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 pathcủa Item (dang duyet) == voi pathURL chung ta truyền vao thi se Show Videotương ứng đó

                                   showVideoObject(Path);

                                }

                            }

                        }

                    });

                }

            });

        }

        $(document).ready(function() {

            showVideo(0);

        });   

    </script>

5. Viết code cho hiển thị Playlist trên Gridview và thực hiện phân trang

DataSet ds = newDataSet();

    protected void Page_Load(object sender,EventArgs e)

    {

       ds.ReadXml(Server.MapPath("tv.xml"));

        GdvPlayer.DataSource = ds.Tables[0];

        GdvPlayer.DataBind();      

 

    }

    protected voidGridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)

    {

        GdvPlayer.PageIndex = e.NewPageIndex;

        GdvPlayer.DataSource = ds.Tables[0];

        GdvPlayer.DataBind();

    }

Chúc các bạn thành công với cách làm này!

http://www.myskills.vn/