javascript - 重新加载 html5 视频标签的源在 chrome 上不起作用

Question

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

视频标签

<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 文件作为后备。