基于Flowplayer打造一款免費(fèi)的WEB視頻播放器附源碼
Flowplayer 是一個(gè)開源(GPL 3的)WEB視頻播放器。您可以將該播放器嵌入您的網(wǎng)頁中,如果您是開發(fā)人員,您還可以自由定制和配置播放器相關(guān)參數(shù)以達(dá)到您要的播放效果。本文主要介紹Flowplayer的使用。
Flowplayer支持播放flv、swf等流媒體以及圖片文件,能夠非常流暢的播放視頻文件,支持自定義配置和擴(kuò)展。
1、加載flowplayer.js
在要播放視頻的頁面的head之間加入flowplayer.js。
<script type="text/javascript" src="js/flowplayer-3.2.6.min.js"></script>
您可以到flowplyer官網(wǎng)上下載最新版本:http://flowplayer.org/download/index.html
2、XHTML
在需要加入播放器的地方加入如下一段代碼:
<a href="flowplayer.flv" style="display:block;width:520px;height:330px" id="player"></a>
將a標(biāo)簽的href屬性指向要播放的視頻地址,然后設(shè)置樣式,寬度和高度,以及設(shè)置display:block,當(dāng)然關(guān)鍵的是還要給a標(biāo)簽指定一個(gè)id,以便于JS調(diào)用。
當(dāng)然你也可以只在html中指定一個(gè)DIV,然后由Javascript來控制播放地址,如:
<div id="player2" style="width:520px; height:330px"> </div>
3、Javascript
在頁面底部計(jì)入javascript腳本調(diào)用播放器:
<script type="text/javascript"> flowplayer("player", "flowplayer-3.2.7.swf"); </script>
使用flowplayer()函數(shù)調(diào)用播放器,第一個(gè)參數(shù)是播放器的id,第二個(gè)參數(shù)是播放器的路徑,它是一個(gè)flash文件,一定要保證播放器的路徑正確。
如果不是使用a標(biāo)簽調(diào)用視頻文件,而是使用DIV來調(diào)用,則代碼如下:
flowplayer( "player2", "flowplayer-3.2.7.swf",{ clip: { url: "flowplayer.flv", autoPlay: false, autoBuffering: true } } );
flowplayer()函數(shù)的第三個(gè)參數(shù)是可以進(jìn)行多項(xiàng)設(shè)置的,其實(shí)就是高級(jí)設(shè)置。clip方法里的url:表示視頻文件的真實(shí)地址,autoPlay:表示是否自動(dòng)播放,默認(rèn)是true,autoBuffering:表示是否自動(dòng)緩沖,即當(dāng)視頻文件設(shè)置為不自動(dòng)播放時(shí),播放器仍然預(yù)先下載視頻文件內(nèi)容。
flowplayer還支持播放列表,以及皮膚設(shè)置等多項(xiàng)高級(jí)設(shè)置,具體設(shè)置方法,感興趣的同學(xué)可以請(qǐng)?jiān)L問:http://flowplayer.org/documentation/configuration/index.html。
- Android MediaPlayer實(shí)現(xiàn)音樂播放器實(shí)例代碼
- 基于jQuery的網(wǎng)頁影音播放器jPlayer的基本使用教程
- flvplayer.swf flv視頻播放器使用方法
- 超酷的網(wǎng)頁音樂播放器DewPlayer使用方法
- 頁面嵌入Windows Media Player播放器代碼需要注意的
- MediaPlayer 在線播放器代碼
- 內(nèi)嵌式RealPlayer播放器的參數(shù)含義
- Window Media Player 播放器
- 網(wǎng)頁播放器的參數(shù)含義 Windows Media Player 網(wǎng)頁播放器 參數(shù)含義
- layer彈出層中H5播放器全屏出錯(cuò)的解決方法
相關(guān)文章
JavaScript數(shù)組去重和扁平化函數(shù)介紹
這篇文章主要介紹了JavaScript數(shù)組去重和扁平化函數(shù),數(shù)組扁平化又稱數(shù)組降維,下面文章圍繞數(shù)組去重和扁平化函數(shù)得相關(guān)資料展開內(nèi)容,需要的朋友可以參考一下2021-12-12除Console.log()外更多的Javascript調(diào)試命令
本篇文章給大家介紹了除Console.log()外更多的Javascript調(diào)試命令,方便大家更多環(huán)境下的JS調(diào)試,學(xué)習(xí)下吧。2018-01-01JS實(shí)現(xiàn)給json數(shù)組動(dòng)態(tài)賦值的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)給json數(shù)組動(dòng)態(tài)賦值的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)json數(shù)組的遍歷、賦值等常用操作技巧,需要的朋友可以參考下2017-07-07JS 打印功能代碼可實(shí)現(xiàn)打印預(yù)覽、打印設(shè)置等
一個(gè)不錯(cuò)的JS 打印功能代碼,包括打印預(yù)覽、打印設(shè)置等,里面整合了很多知識(shí),是一個(gè)不錯(cuò)的學(xué)習(xí)案例2014-10-10electron獲取位置坐標(biāo)信息的方法小結(jié)
這篇文章給大家詳細(xì)介紹了electron 如何獲取位置坐標(biāo)信息,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02javascript開發(fā)隨筆一 preventDefault的必要
給a做按鈕的click事件加preventDefault阻止瀏覽器的默認(rèn)行為貌似是印象中必須的事情2011-11-11