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)函数的beginn添加警报时，它将在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

这就是为什么新选择的视频在警告消息框中加载的原因是它会导致回传，即视频加载时。

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

2 个答案: