2

HTML5 ビデオを使用して、ローカルの JS ベースのメディアテクを構築しようとしています。コードはこのJSBINと同じで、オンライン コンテンツでうまく機能しています。しかし、ローカルファイルでこのコードを使用すると（ここで見つけることができるように）、Safariはエラーをスローします

INVALID_STATE_ERR: DOM 例外 11: 使用できない、または使用できなくなったオブジェクトを使用しようとしました。

サムネイル画像をクリックして 3 回目の動画を開始すると、プレーヤーが開き、動画の URL が読み込まれます。

エラーは「$vplayer.currentTime = 0.0;」から発生します。この行がなくても問題は残りますが、エラーはまったくスローされません。

このエラーは、ビデオがロードされていないことを意味していることはわかっていますが、原因は - ですが、最初の 2 回はロードされたのはなぜですか?

編集:「file://」から「file:///」への絶対パスを使用してさまざまなアプローチも試しましたが、何も変わりません。

編集: object-c WebView コンポーネント (iOS) のブラウザー エンジンを使用すると、この動作がなくなることがわかりました。また、クロムを使用している場合にも機能します。サファリのバグらしい？

使用されるコード:

<html>

<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />    
</head>
<body>

  <div data-role="page" id="gamepad">
    <div id="videolink">
    </div>
            <div data-role="popup" id="vplayerpopup" data-position-to="window" data-overlay-theme="a" data-theme="a" class="ui-content" data-tolerance="5,5,5,5" data-transition="fade">
            <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
            <video id="vplayer" width="640" height="360" controls> 
                <source id="vsource" src="" type="video/mp4" />
            </video>
        </div>

  </div>

</body>
</html>

と

var $videoblock =   '<div class="ui-block-a videoblock">'
    +                   '   <div class="videoPreviewImageWrapper">'
      +                 '       <a href="#vplayerpopup" data-rel="popup" onclick="mediathekVideolink = \'http://blog.gingertech.net/wp-content/uploads/2011/01/LCA_MM_AVProc2011/HelloWorld.mp4\';">'
        +                   '           <div class="videolink">'
          +                 '               <img src="http://leanbackplayer.com/videos/poster/sintel_640x360.jpg" width="218" height="164" alt="Movie Title">'
            +                   '               <div class="mediathek_film_titel">Movie Title</div>'
              +                 '               <div class="mediathek_film_dauer">03:56</div>'
                +                   '               <div class="mediathek_film_text">Some Text about the video</div>'
                  +                 '           </div>'
                    +                   '       </a>'
                      +                 '   </div>'
                        +                   '</div>';

$('#videolink').append($videoblock);

var mediathekVideolink = 'none';
var mediaplayerIsPlaying = false;

$( '#gamepad' ).live( 'pagebeforeshow', function(){

    $( "#vplayerpopup" ).on({
            popupbeforeposition: function(opt1, opt2) { //console.log('mediathekVideolink: ' + mediathekVideolink);
                //console.log('popupbeforeposition');
                $('#vsource').attr('src', mediathekVideolink); 
                var $vplayer = $('#vplayer').get(0); 
                if(!mediaplayerIsPlaying) {
                    $vplayer.load();
                    $vplayer.play();
                    mediaplayerIsPlaying = true;
                }
            },
            popupafterclose: function() {
                //console.log('popupafterclose');
                mediaplayerIsPlaying = false;
                var $vplayer = $('#vplayer').get(0); //console.log('currentTime: ' + $vplayer.currentTime); console.log('currentSrc: ' + $vplayer.currentSrc);
                $vplayer.pause();
                $vplayer.currentTime = 0.0;
            }
        });
});

$( '#gamepad' ).live( 'pagehide', function(){
    $( "#vplayerpopup" ).off();

});
4

2 に答える 2

2

残念ながら、多くのブラウザーはローカル ファイルの操作を好みません。Firefox にはこの特定の問題はありませんが、他の問題 (CSS/WOFF フォントに関連するもの) があります。

私が使用するソリューションは、ローカル開発 Web サーバー ( XAMPPなど) を用意し、さまざまな Web ブラウザーを使用してテストすることです。ファイアウォール オプションをセットアップして、コンピューター上の Apache サーバーのみを許可し、ローカル ネットワークでは許可しないようにする必要があります。

さらに、PHP/Perl などを入手できます。ローカル ファイルだけでは取得できないその他のスクリプト言語。

于 2013-01-20T23:16:29.813 に答える
1

ビデオプレーヤーのポップアップを閉じるたびにページを更新することで、これを回避することができました。

function stopVideo(n){
    mediaplayerIsPlaying = false;
    var video = document.getElementsByTagName('video')[n];
    video.pause();
    location.reload();
}

これは最悪の場合の回避策にすぎませんが、少なくともこれを「一種の作業」として提供できます...

于 2013-01-14T14:06:11.477 に答える