奇怪的Safari视频“加载”行为

Question

我为我的网站的一个页面编写了一个简单的视频播放器，通过单击按钮来更改源标记的src属性，然后调用播放器元素上的加载。视频元素如下所示：

<video id="player" title="Video 1" controls  width="600" height="480" preload="metadata">
    <source src="videos/english.mp4" type="video/mp4" />
    <source src="videos/english.webm" type="video/webm" />
    <source src="videos/english.ogv" type="video/ogg" />
    <object type="application/x-shockwave-flash" data="plugins/flash/player.swf" width="600" height="480">
        <param name="movie" value="plugins/flash/player.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="allowscriptaccess" value="always" />
        <param name="flashvars" value="file=../../videos/english.mp4" />
        <p>Your browser can't play HTML5 video. <a href="videos/english.webm">Download it</a> instead.</p>
    </object>
</video>

与click事件相关的脚本如下所示：

$(".playerControl").live("click tap",function(){

    // If the player isn't playing this divs video

    if($("#player").data('currentVideo') != $(this).data('videoID')){

        // Swap active button states

        $(".playerControl.active").removeClass('active');
        $(this).addClass('active');

        // Pause the current video and swap the content, then load the player

        $("#player")[0].pause();
        $("#player").html($(this).data('innerHTML'));
        $("#player").data({
            innerHTML: $(this).data('innerHTML'),
            currentVideo: $(this).data('videoID')
        });
        $("#player")[0].load();
        updateBackup();

    }       
});

这在Chrome上可以完美运行，可能是Firefox，但是当我在Safari上使用它时，出现了最奇怪的问题。第一个视频将显示，但我尝试播放的每一个视频甚至都没有尝试加载。从控制台调用播放器上的load也不会产生结果，但是对播放器的检查显示其来源是正确的，如果我设法在视频无效后点击它，视频将播放。

我希望这听起来不会太混乱，基本上safari不会加载我尝试播放的所有其他视频，但是可以自己播放任何文件都没有问题。我觉得有一些额外的功能，我必须打电话让它工作，但我不确定。

更新：无论单击哪个按钮，我都重写了click事件，并且每隔一次点击加载视频是一个问题，而不是视频本身。

更新2：我尝试添加几行清除视频html并在插入新的html之前加载，初始化它，这导致它开始加载大约三分之二的时间。

Answer 1

您可以尝试在块中包装<video>标记并重写其innerHTML。

像这样的东西：

<div id="player-holder">
    <video id="player">...</video>
</div>

// rebuild player data and reload HTML.
$("#player").html($(this).data('innerHTML'));
$('#player-holder').html($('#player-holder').html())

这将重建<video>元素，可能有助于解决Safari中的问题。