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