1. 程式人生 > >使用JWPlayer在網頁中嵌入視訊

使用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>