我一直以為在網頁中嵌入視頻是件復雜的事,一研究才知道原來非常簡單。
實際就是在頁面中嵌入個控件。社區里已有很多解決方案了。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>