Question

我尝试用HTML5视频构建一个基于JS的本地mediathek。代码与此JSBIN中的代码相同，适用于在线内容。但是当我将这段代码用于本地文件时（就像你可以find here一样），Safari会抛出错误

INVALID_STATE_ERR：DOM异常11：尝试使用不可用或不再可用的对象。

通过点击拇指图像第三次启动视频后，打开播放器并加载视频网址。

错误来自'$ vplayer.currentTime = 0.0;'没有这一行，问题仍然存在，但根本没有错误。

我知道这个错误意味着视频没有被加载而且是由 - 但是为什么之前加载前两次？

编辑：我还尝试了从'file：//'到'file：///'的绝对路径的不同方法 - 没有任何变化。

编辑：我发现当使用Objective-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();

});

Answer 1

可悲的是，许多浏览器不喜欢使用本地文件。 Firefox没有这个特定的问题，但它有其他的（与CSS / WOFF字体相关）。

我使用的解决方案是拥有一个本地开发Web服务器（如XAMPP），然后使用各种Web浏览器进行测试。您应该能够将防火墙选项设置为仅允许计算机上的Apache服务器，而不是本地网络上的Apache服务器。

另外，你得到PHP / Perl /等。和其他脚本语言，你不仅仅是本地文件。

Answer 2

我现在设法通过每次关闭视频播放器弹出窗口时刷新页面来解决这个问题

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

这只是最糟糕的解决方案 - 但至少我可以将其作为'工作'来实现......

Safari中的HTML5-Bug？使用本地文件时视频无效

2 个答案: