flowplayer什么意思
Flowplayer是可嵌入到web頁面的視頻播放器,支持flv、mp4、flash等格式。
在網(wǎng)頁中使用Flowplayer嵌入引用視頻的詳細步驟:
1. 在桌面新建一個flowplayer作為本文的演示文件夾,使用搜索引擎搜索或進入Flowplayer官網(wǎng)下載Flowplayer:
2. 打開下載的文件,看到有這樣兩個文件:
(1)flowplayer.js
(2)flowplayer.min.js
很容易理解,一個是格式化文件,一個是min壓縮文件,壓縮文件有一個好處是加載速度更快,這里選擇使用flowplayer.min.js
3. 將flowplayer.min.js復制到準備好的flowplayer目錄下,并新建index.html,進行相關操作:
4. 在視頻展示位置加入下圖所示代碼:
5. 這時候使用瀏覽器打開為發(fā)現(xiàn)頁面排版的問題,原因是沒有引入樣式表,打開前期下載的文件夾,將skin目錄引入,刷新瀏覽器,查看效果:
6. 下載MP4/flv/flash文件,并修改video標簽下的src屬性,完成引用。在瀏覽器打開頁面查看效果:
如何使用html5播放視頻
1、<video src="hangge.mp4" controls></video>1
2,通過width和height設置視頻窗口大小
<video src="hangge.mp4" controls width="400" height="300"></video>1
3,預加載媒體文件
設置preload不同的屬性值,可以告訴瀏覽器應該怎樣加載一個媒體文件:
(1)值為auto:讓瀏覽器自動下載整個文件
(2)值為none:讓瀏覽器不必預先下載文件
(3)值為metadata:讓瀏覽器先獲取視頻文件開頭的數(shù)據(jù)塊,從而足以確定一些基本信息(比如視頻的總時長,第一幀圖像等)
<!-- 用戶點擊播放才開始下載 --><video src="hangge.mp4" controls preload="none"></video>12
4,自動播放
(1)使用autoplay屬性可以讓瀏覽器加載完視頻文件后立即播放。
<video src="hangge.mp4" controls autoplay></video>1
(2)如果啟用自動播放,可以將播放器設置為muted狀態(tài)。這樣自動播放時會靜音,防止用戶厭煩。用戶需要的話可以點擊播放器揚聲器圖標重新打開聲音。
<video src="hangge.mp4" controls autoplay muted></video>1
5,循環(huán)播放
使用loop屬性讓視頻播放結束時,再從頭開始播放。
<video src="hangge.mp4" controls loop></video>1
6,設置替換視頻的圖片(封面圖片)
通過poster屬性可以設置,瀏覽器在下面三種情況下會使用這個圖片:
(1)視頻第一幀未加載完畢
(2)把preload屬性設置為none
(3)沒有找到指定的視頻文件
<video src="hangge.mp4" controls poster="hangge.png"></video>1
7,瀏覽器兼容,如何讓每一個瀏覽器都能順利播放視頻
現(xiàn)在大部分瀏覽器都能支持H.264格式的視頻,但Opera瀏覽器卻一直不支持。我們需要通過后備措施保證每個人都能看到視頻,通常有下面幾種方案:
(1)使用多種視頻格式
<video>和<audio>元素有個內(nèi)置的格式后備系統(tǒng)。我們不使用src屬性,而是在其內(nèi)部嵌套一組<source>元素,瀏覽器會選擇播放第一個它所支持的文件。
我們可以添加WebM格式的視頻提供對Opera的支持。
<video controls>
<source src="hangge.mp4" type="video/mp4">
<source src="hangge.webm" type="video/webm">
</video>1234
(2)添加Flash后備措施(推薦)
上面那個方法不推薦,應為Opera瀏覽器只占不到1%的份額。特意為它把視頻都轉碼一邊太費事。使用Flash作為備用播放方案還是很方便的,同時Flash還能兼容IE8這種連<video>元素都不支持的老瀏覽器。
這里使用Flowplayer Flash作為備用播放器(本地下載 :flowplayer-3.2.18.zip)
<video controls>
<source src="hangge.mp4" type="video/mp4">
<source src="hangge.webm" type="video/webm">
<object id="flowplayer" width="400" height="300"
data="flowplayer-3.2.18.swf"
type="application/x-shockwave-flash">
<param name="movie" value="flowplayer-3.2.18.swf">
<param name="flashvars" value='config={"clip":"hangge.mp4"}'>
</object>
</video>1234567891011
(3)也有人優(yōu)先使用Flash,而HTML5作為后備措施。
這么做是因為Flash普及率比較高,而HTML5作為后備可以擴展iPad和iPhone用戶
<object id="flowplayer" width="400" height="300" data="flowplayer-3.2.18.swf" type="application/x-shockwave-flash">
<param name="movie" value="flowplayer-3.2.18.swf">
<param name="flashvars" value='config={"clip":"hangge.mp4"}'>
<video controls>
<source src="hangge.mp4" type="video/mp4">
<source src="hangge.webm" type="video/webm">
</video>
</object>
flowplayer怎么用?最好能講解的詳細些~!
http://www.cnblogs.com/yuzhongwusan/archive/2012/02/08/2342349.html這里寫得挺詳細的,你下載的文件里面也是又源代碼的,把路徑的那個網(wǎng)址改成你的視頻網(wǎng)址就可以播放了
flowplayer為什么有的mp4播放不了?
總的分析有二種情況:
一,格式,格式不對,無法解碼,所以不能播放。
解決辦法,轉碼或格式變換,這樣比較麻煩,建議你下載普清的視頻。
二,分辨率不對,視頻圖像尺寸不對,所以不能放。這個要重新設置下尺寸分辨率才可以顯示、。
如有哪里歡迎追加,專業(yè)數(shù)碼維修售后為你服務。