Javascript 奇数狩猎视频“；“加载”；行为

我为我的站点的一个页面编写了一个简单的视频播放器，它通过单击按钮来更改源标记的

src

属性，然后调用player元素上的load。视频元素如下所示：

<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();

    }       
});

<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())

这在Chrome和Firefox上都能很好地工作，但当我在Safari上使用它时，最奇怪的问题出现了。第一个视频将显示，但我尝试播放的每一个视频都不会加载。从控制台对播放机调用

load

，也不会产生结果，但对播放机的检查表明其来源是正确的，如果我在视频不起作用后单击它，视频将播放

我真的希望这听起来不要太混乱，基本上safari不会加载我尝试播放的所有其他视频，但自己播放任何文件都没有问题。我有一种感觉，我必须调用一些额外的函数才能让它工作，但我不确定

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

---

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

您可以尝试将

标记包装在块中并重写其内部html

大概是这样的：

<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();

    }       
});

<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())

...
//重建播放器数据并重新加载HTML。
$（“#player”）.html（$（this.data（'innerHTML'））；
$（'.'玩家持有者'）.html（$（'.'玩家持有者'）.html（））

---

这将重建

元素，可能有助于解决Safari中的问题。

我最终实现的解决方案是丢弃标记，并使用“canPlayType（type）”以正确的格式直接作为src加载。似乎还不完全支持标记。您也可以添加自己的答案；）对于Safari来说，您对这个问题的回答似乎更准确。