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';

 

简单的整理一下  有机会再回来完善