使用JWPlayer在網頁中嵌入視頻

時間 2019-11-13

原文原文鏈接

我一直覺得在網頁中嵌入視頻是件複雜的事，一研究才知道原來很是簡單。css

實際就是在頁面中嵌入個控件。社區裏已有不少解決方案了。jwplayer是最受歡迎的（之一）。
控件包括js、css和swf文件，swf文件就是播放器，它是控件的一部分，引入控件包跟引入其餘的前端控件包方法同樣，拷貝到項目路徑下便可。
視頻是個flv文件，flv文件就放哪裏都行了。我的建議像圖片同樣放個單獨的服務器。html

示例程序在這裏，代碼已經傳到了github上。
jwplayer自己的文檔在這裏，藏得很是深，我的很是不喜歡這個官網，花裏胡哨，張牙舞爪。
官方文檔我仍是喜歡樸素簡潔的那種。前端

網頁代碼及其簡單，僅此而已：java

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

   <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>github