昨天使用H5  video 标签 写了视频播放   本打算参考爱奇艺的代码进行修改  发现 它是动态数据  静态页面需要拆解代码  

我情急之下  使用了  video   整理一下笔记   后面有人用 的话 简单起来

　　　　video兼容性

格式IEFirefoxOperaChromeSafari

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="文件路径地址" controls="控制条" autoplay="自动播放" loop="循环" preload="预加载" <video 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';

 

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