处理火狐自动播放视频

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://carlscoollife.blogbus.com/logs/125121432.html

稍微看了一下HTML5中的video嵌入问题。 记录一下

1. HTML5 是一些新的HTML特性的集合，HTML5中的各个功能在不同浏览器上的支持程度不同。简单的说某某浏览器支持HTML5是没有意义的，正确的说法是某某是否支持HTML5中的某个tag 比如video.

 

2. HTML5中的一个最大的特性就是<video>了，可以嵌入视频，而从前主要要靠flash. 那么大家当然不希望都用 Adobe的东西，于是采用了<video>来嵌入。其实video很简单，但是又有浏览器支持的问题，老的浏览器当然不至支持video啦，于是要用flash, 不同浏览器支持的视频类型又有些不同，特别的现在有了iPhone, iPod,Android他们支持的情况也有区别。因此本来简简单单的<video>又变得复杂纠结起来。

更有奇怪的事情，就是firefox浏览器不支持loop="true"这个属性，不能使用这个属性来控制视频自动播放。好在我们可以写一段javascript来获取ended事件，然后启动start()来重新开始播放。

一个简单的例子如下。 一部分是说明了如何支持多浏览器，一部分是说明了如何使用javascript对于firefox重新loop.

 

<!-- use this script to enable loop in browswer doesn't support loop, like Firefix -->
<script>
   var v = document.createElement("video"); // Check if the browser supports the video tag
   if ( !v.play ) { // If no, use Flash.
   }
   else {
      // fix for firefox not looping
      var myVideo = document.getElementById('myvideo');
      if (!(typeof myVideo.loop == 'boolean')) { // loop supported
         myVideo.addEventListener('ended', function () {
            this.currentTime = 0;
            this.play();
         }, false);
      }
   }
</script>
<video id="myvideo" preload="none" loop="loop" width="640px" height="480px" controls="controls" loop="true" autoplay="autoplay">
|<!-- for browsers support ogg, like Chrome, Firefox 4, Opera, IE 9 -->
<source src="test.ogg" type="video/ogg" loop="loop" />
<!-- for browswers support mp4, like Safari -->
<source src="test.m4v" type="video/ogg" loop="loop" />
<!-- for that does not support the video tag,  here i insert some random swf file. -->
<div><object width='480' height='370' ><param name='allowScriptAccess' value='always' /><embed pluginspage='http://www.macromedia.com/go/getflashplayer' src='some_flash.swf' type='application/x-shockwave-flash'></embed></object></div>
</video>

最后推荐一个很好的HTML5介绍书籍，http://diveintohtml5.org 写的很简洁。网上看也很方便。