10 09/2014

html5 video

最后更新: Wed Sep 10 2014 12:36:06 GMT+0800

html5 video tag

标准写法为

<video controls preload="false" poster="v/oceans.png">
  <source src="v/oceans.mp4" type="video/mp4">
  <source src="v/oceans.ogv">
  <track src="v/zimu.vtt" kind="subtitles" srclang="中文" label="中文"></track>
  <track src="v/zimu.vtt" kind="captions" srclang="中文" label="中文"></track>
</video
  • controls 是否显示控制（播放、暂停、全屏、字幕等）
  • preload 是否预加载
  • poster 封面（视频截图）
  • source 视频的多个地址（依次）。firefox 不能放 mp4，只能 ogg，或者 webm
  • track 字幕

现实是残酷的

有很多视频解决办法。 videojs jwplayer 等等。思路都是：

如果sb浏览器，如ie67等，用 flash 替换。否则用浏览器自带。

判断办法

var v = document.createElement('video');
if(v.canPlayType){console.log('浏览器支持 video tag');}

更可以判断是否支持某视频格式

return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

当然，如果有 Modernizr js，就更简单了

if (Modernizr.video) {
  // let's play some video! but what kind?
  if (Modernizr.video.webm) {
    // try WebM
  } else if (Modernizr.video.ogg) {
    // try Ogg Theora + Vorbis in an Ogg container
  } else if (Modernizr.video.h264){
    // try H.264 video + AAC audio in an MP4 container
  }
}

其它

ie8-9-10 这个笨蛋，经常返回 unsupported video type or invalid file path。估计是 mime 的问题，懒得验证了。

iphone 也是笨蛋。更方面显示，都是支持的。但就是不能播放。有说法，图像分辨率超过 iphone 尺寸的不放。也有人拿越狱说事。（没iphone，测试不方便，就此放弃）

参考：