重新加载html5视频标记的来源不适用于chrome

Question

在网站上我有一个简单的视频播放器标签和视频列表。单击视频标签的元素我将视频标签的海报和src属性更改为视频标记内的标记和源标记的类型。这一切在FF和IE中工作正常，但它不适用于chrome。

VideoTag

<video id='video' class='video-js vjs-default-skin' controls preload='none' width='640' height='320' poster='./poster/dummy.png' data-setup='{}' preload='none'>
    <source src='./video/BeHappyToBeAlive.mp4' type='video/mp4'>
    <track kind='captions' src='demo.captions.vtt' srclang='en' label='English'></track><!-- Tracks need an ending tag thanks to IE9 -->
    <track kind='subtitles' src='demo.captions.vtt' srclang='en' label='English'></track><!-- Tracks need an ending tag thanks to IE9 -->
    Your Browser does not support video tag. Please update your Browser.
</video>

JavaScript的

$(document).ready(function(){

var videoChanging = false;

function changeVideo(videoTag) {

    var video = videoTag.children().first();
    var src = video.children('source');
    var title = video.parent().find('h3').html();
    var description = video.parent().find('p').html();
    var poster = video.attr('poster');
    var source = video.children().first().attr('src');
    var mainVideo = $('#video_html5_api');
    var mainVideoBox = $('#video');
    mainVideo.children('source').remove();
    mainVideo.prepend(src.clone());
    mainVideo.attr('poster', poster);
    mainVideo.attr('src', source);
    mainVideoBox.parent().find('h3').html(title);
    mainVideoBox.parent().find('p').html(description);
    document.getElementById('video_html5_api').load();
    videoChanging = false;
    setTimeout(function(){
        document.getElementById('video_html5_api').play();
    }, 200);
}

$('.videoListItemBox > a ').on('click', function () {

    if( videoChanging ){
        return;
    }

    document.getElementById('video_html5_api').pause();
    var video = $(this);
    videoChanging = true;
    var changeMovieCallback = function(){ changeVideo( video ); }
    var t = setTimeout(changeMovieCallback, 200);

});

});

当我在changeVideo(videoTag)函数的开头添加警报时，它将在chrome中正常工作。有人可以解释我的原因并给我一个解决方案来解决这个问题吗？

Answer 1

它可能是您视频元素上的preload='none'属性。但很难说 - 你的样本太复杂了。简单的事情怎么样？

<video id='video' controls width='640' height='320'>
    Your Browser does not support video tag. Please update your Browser.
</video>

<div class= "videoListItemBox">
  <a href="#" data-src="http://html5demos.com/assets/dizzy.mp4" 
    data-poster="http://lorempixel.com/640/320/">video 1</a>
  <a href="#" data-src="http://techslides.com/demos/sample-videos/small.mp4" 
    data-poster="http://lorempixel.com/640/320/">video 2</a>
<div>

码：

$(function(){
  $('.videoListItemBox > a ').on('click', function (e) {
    var link = $(this);
    $('#video')
        .attr('poster', link.data('poster'))
        .attr('src', link.data('src'))
        .get(0).play();
    e.preventDefault(); 
  });
});

看到这个jsbin：http://jsbin.com/bamafaki/2/edit

请注意，并非所有浏览器都支持* .mp4文件，因此您应该扩展代码以包含* .webm文件作为后备。

Answer 2

新选择的视频加载到警报消息框的原因是它会导致回发，即加载视频时。