H5 video 標簽 詳解

昨天使用H5  video 標簽 寫了視頻播放   本打算參考愛奇藝的代碼進行修改  發現 它是動態數據  靜態頁面需要拆解代碼  

我情急之下  使用了  video   整理一下筆記   后面有人用 的話 簡單起來

　　　　video兼容性

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4(MP4視頻格式)	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

 

            video標簽屬性

                src="文件路徑地址" width="寬" height="高" controls="控制條" autoplay="自動播放" loop="循環" preload="預加載" 

                <video width="320" height="240" controls="controls">
　　　　　　　　　　　　<!-- 同一視頻的兼容性寫法 -->
                     <source src="movie.ogg" type="video/ogg">
                     <source src="movie.mp4" type="video/mp4">
                     <!-- 同一視頻的兼容性寫法 -->
                     Your browser does not support the video tag. 
                </video>

            video  js API

方法	屬性	事件
play()               //播放	currentSrc	play
pause()           //暫停	currentTime  //當前時間	pause
load()              //加載	videoWidth	progress      //進度
canPlayType	videoHeight	error
	duration      //視頻長度	timeupdate
	ended	ended
	error	abort
	paused	empty
	muted	emptied
	seeking	waiting
	volume //聲音	loadedmetadata
	height
	width

注釋：在所有屬性中，只有 videoWidth 和 videoHeight 屬性是立即可用的。在視頻的元數據已加載后，其他屬性才可用。

視頻拉伸效果

video的css樣式設置成 object-fit:'fill';

 

簡單的整理一下  有機會再回來完善