2

我有几个包含视频对象的 div。他们只需点击缩略图即可播放。但是，如果用户单击另一个选项，我会遇到视频继续“在幕后”播放的问题。所以，我从一个溢出者那里得到这个来“停止”视频，将其返回到第一帧，淡出，然后淡入并播放下一个选择的视频：

这是 jQuery 脚本：

$(function(){
$('div.video').hide();

$('.icon').click(function(){
    var id=$(this).data('id'),
        thisDiv=$("div.video[data-id='" + id +"']"),
        thisVideo=$("div.video[data-id='" + id +"']").find('video');

    $('video').each(function () {
        this.pause();
        this.currentTime = 0;
    });

       $('div.video').not(thisDiv).fadeOut();

       thisDiv.fadeIn();      
       thisVideo.get(0).play();   
});
});

以及视频对象的八个 div 之一的 html：

<div class="video" data-id="1" >
<video width="auto" height="100%" controls="controls">
  <source src="videos/video.mp4" type="video/mp4" />
  <source src="videos/video.ogv" type="video/ogg" />
  <source src="videos/video.webm" type="video/webm" />
<object data="videos/video.mp4" width="auto" height="100%">
  <embed src="videos/video.swf" width="auto" height="100%" />
</object> 
</video>
</div>

而且它有效……大多数时候。有时，我得到错误：

this.currentTime = 0; Uncaught Error: INVALID_STATE_ERR: DOM Exception 11

在 Chrome 的错误日志中。IE8 显示相同的错误。

有谁知道这是怎么一回事？我能做些什么来解决它？

4

0 回答 0