4

ボタンをクリックしsrcてソースタグの属性を変更し、プレーヤー要素にロードを呼び出すことで機能する、サイトの1ページ用の単純なビデオプレーヤーを作成しました。ビデオ要素は次のようになります。

<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でこれを使用すると最も奇妙な問題が発生します。最初のビデオは表示されますが、再生しようとする1つおきのビデオはロードしようとさえしません。コンソールからプレーヤーを呼び出しloadても結果は得られませんが、プレーヤーを調べると、そのソースが正しいことがわかります。ビデオが機能していない後でクリックすると、ビデオが再生されます。

あまり混乱しないように思えますが、基本的にサファリは私が再生しようとしている他のすべてのビデオをロードしませんが、ファイルを単独で再生するのに問題はありません。それを機能させるために呼び出さなければならない余分な関数があるように感じますが、よくわかりません。

更新：クリックされたボタンに関係なく実行するようにクリックイベントを書き直しました。これは、ビデオ自体ではなく、クリックごとにビデオをロードする際の問題です。

更新2：新しいhtmlを挿入する前に、ビデオhtmlをクリアしてロードする数行を追加して初期化しました。これにより、約3分の2の時間でロードが開始されました。

4

1 に答える 1

2

タグをブロックでラップ<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での問題に役立つ可能性があります。

于 2012-10-07T10:38:19.140 に答える