使用JWPlayer在網頁中嵌入視頻


我一直以為在網頁中嵌入視頻是件復雜的事,一研究才知道原來非常簡單。

實際就是在頁面中嵌入個控件。社區里已有很多解決方案了。jwplayer是最受歡迎的(之一)。
控件包括js、css和swf文件,swf文件就是播放器,它是控件的一部分,引入控件包跟引入其他的前端控件包方法一樣,拷貝到項目路徑下即可。
視頻是個flv文件,flv文件就放哪里都行了。個人建議像圖片一樣放個單獨的服務器。

示例程序在這里,代碼已經傳到了github上。
jwplayer本身的文檔在這里,藏得非常深,個人非常不喜歡這個官網,花里胡哨,張牙舞爪。
官方文檔我還是喜歡朴素簡潔的那種。

網頁代碼及其簡單,僅此而已:

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>use jw</title>

    <script src="jwplayer/jwplayer.js"></script>
    <!-- 並不是每個用戶獨有的身份碼,官網給的唯一的,不用改 -->
    <script>jwplayer.key="bAoNHra71KE/mHvb0sirT4HeWLTAkpiYa1mVsA==";</script>
</head>
<body>
    <div id="myElement">Loading the player...</div>
    <script type="text/javascript">
    var playerInstance = jwplayer("myElement");
    playerInstance.setup({
        file: "http://img.zidafone.com/test.flv",
        image: "http://img.zidafone.com/test.jpg",
        width: 640,
        height: 360,
        title: 'Beautiful Woman',
        description: 'This is the most beautiful woman in the world, do you agree?'
    });
    </script>
</body>
</html>

長期歡迎項目合作機會介紹,項目收入10%用於酬謝介紹人。新浪微博: @冷鏡,QQ:908789432。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM