奇怪的 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>

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

$(".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 不会加载我尝试播放的所有其他视频，但自己播放任何文件都没有问题。我有一种感觉，我必须调用一些额外的函数才能让它工作，但我不确定。

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

更新 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 中的问题。