视频播放解决方案

王叨叨 | 2015-06-30 | 分类笔记 | 标签 front_end video html5

视频格式

当前，video 元素支持三种视频格式：

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

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

一个通用的解决办法，在支持HTML5的浏览器下，使用video，不支持的使用FLASH

<video width="640" height="360" controls="controls" autoplay="autoplay">
  <!-- Safari / iOS, IE9 -->
  <source src="movie.mp4" type="video/mp4"  />
  <!-- Chrome10+, Ffx4+, Opera10.6+ -->
  <source src="movie.webm" type="video/webm" />
  <!-- Firefox3.6+ / Opera 10.5+ -->
  <source src="movie.ogg" type="video/ogg"  />
  <!-- fallback to Flash: -->
  <object width="640" height="360" type="application/x-shockwave-flash" data="flvplayer.swf">
    <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
    <param name="movie" value="flvplayer.swf" />
    <param name='quality' value='high' />
    <param name='allowFullScreen' value='true' />
    <param name='FlashVars' value='vcastr_file=movie.flv&amp;IsAutoPlay=0&amp;IsContinue=0&amp;DefaultVolume=50' />
    <!-- fallback image -->
    <img src="movie.jpg" width="640" height="360" alt="movie" title="No video playback capabilities, please download the video below" />
  </object>
</video>

播放器右键另存：flvplayer.swf

注意的是，视频要存储为h.264文件！

如果觉得此篇文章对您有帮助，希望可以请我喝雪碧！