-1

ビデオ要素のソースを動的に変更して Iphone で動作させる堅牢な方法を見つけた人はいますか? 私のテストは Chrome で正常に動作しますが、一貫して動作させることはできません。戦略やプレーヤーに関する提案は大歓迎ですので、どのデバイスでも機能します。

私はビデオ要素を持っています:

<video id="player1" width="320" height="240" preload controls>
    <source src="http://dev.swinginsam.com/_files/testvid_01.mp4" />
    <source src="http://dev.swinginsam.com/_files/testvid_01.webm" type='video/webm; codecs="vp8, vorbis"' />
    <source src="http://dev.swinginsam.com/_files/testvid_01.ogv" type='video/ogg; codecs="theora, vorbis"' />
    <object width="320" height="240" type="application/x-shockwave-flash"
    data="flowplayer-3.2.1.swf">
        <param name="movie" value="flowplayer-3.2.1.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" value='config={"clip": {"url":     "http://dev.swinginsam.com/_files/testvid_01.mp4", "autoPlay":false, "autoBuffering":true}}' />
         <p>Download video as
            <a href="http://dev.swinginsam.com/_files/testvid_01.mp4">MP4</a>,
            <a href="http://dev.swinginsam.com/_files/testvid_01.webm">WebM</a>, or <a href="http://dev.swinginsam.com/_files/testvid_01.ogv">Ogg</a>.</p>
    </object>
</video>

そして、私が使用するプレーヤーを初期化するためのコードのスニペット mediaelementjs - プレーヤーが正しく初期化され、スキンが適用され、最初のビデオで機能するという意味で機能します。

$('#one').live("pageinit", function (event, data) {

 var player1 = new MediaElementPlayer('#player1',{});

 $('#button1').click(function(){
    player1.pause();
    player1.setSrc([
       {src:"http://dev.swinginsam.com/_files/testvid_01.mp4"},
       {src:"http://dev.swinginsam.com/_files/testvid_01.webm", type:'video/webm; codecs="vp8, vorbis"'},
       {src:"http://dev.swinginsam.com/_files/testvid_01.ogv", type:'video/ogg; codecs="theora, vorbis"'}
 ]);



 $('#button2').click(function(){
     player1.pause();
     player1.setSrc([
         {src:"http://dev.swinginsam.com/_files/testvid_02.mp4"},
         {src:"http://dev.swinginsam.com/_files/testvid_02.webm", type:'video/webm; codecs="vp8, vorbis"'},
         {src:"http://dev.swinginsam.com/_files/testvid_02.ogv", type:'video/ogg; codecs="theora, vorbis"'}
      ]);
      player1.load();
 });
});

ボタンを押してソースを変更し始めると、問題が発生します。Chrome では機能しますが、Safari では最初のビデオの再生が続けられます。

4

1 に答える 1

0

});の閉じ括弧がありません$('#button1').click(function(){。JavaScript は次のようになります。

$('#one').live("pageinit", function(event, data) {

    var player1 = new MediaElementPlayer('#player1', {});

    $('#button1').click(function() {
        player1.pause();
        player1.setSrc([
            {
            src: "http://dev.swinginsam.com/_files/testvid_01.mp4"},
        {
            src: "http://dev.swinginsam.com/_files/testvid_01.webm",
            type: 'video/webm; codecs="vp8, vorbis"'},
        {
            src: "http://dev.swinginsam.com/_files/testvid_01.ogv",
            type: 'video/ogg; codecs="theora, vorbis"'}
        ]);

    });

    $('#button2').click(function() {
        player1.pause();
        player1.setSrc([
            {
            src: "http://dev.swinginsam.com/_files/testvid_02.mp4"},
        {
            src: "http://dev.swinginsam.com/_files/testvid_02.webm",
            type: 'video/webm; codecs="vp8, vorbis"'},
        {
            src: "http://dev.swinginsam.com/_files/testvid_02.ogv",
            type: 'video/ogg; codecs="theora, vorbis"'}
        ]);
        player1.load();
    });

});​
于 2012-08-28T07:17:06.957 に答える