Safari中的HTML5-Bug？使用本地文件时视频不起作用

我尝试使用HTML5视频构建基于JS的本地媒体。该代码与此JSBIN中的代码相同，它适用于在线内容。但是当我使用这个代码与本地文件（比如，你可以find here）Safari浏览器引发错误Safari中的HTML5-Bug？使用本地文件时视频不起作用

INVALID_STATE_ERR：DOM异常11：试图使用一个对象不是，或不再，可用。

第三次通过点击缩略图图像开启视频后，该图像打开播放器并加载视频URL。

错误来自'$ vplayer.currentTime = 0.0;'没有这条线，问题依然存在，但根本没有错误发生。

我知道这个错误意味着视频没有加载，它是由引起的 - 但为什么它之前加载前两次？

编辑：我也试着从“文件：//”使用绝对路径不同的方法来“文件：///” - 没有什么变化。

编辑：我发现使用的Objective-C的WebView组件（IOS）的浏览器引擎，当这种行为已经一去不复返了。当使用chrome时它也可以工作。所以它似乎是一个safari的bug？

使用的代码：

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

});

来源

2012-12-10 headkit

这是因为我问的问题很难回答。 ;-) 我尽我所能，人......而一个简单的价值不是我称之为分析的东西。至少我做了一个实例！ – headkit

哦 - 我回答了我的问题。他们中的许多人我自己回答，神经接受他们。我现在好些了吗？ :-) [hostory：变化率从62％到92％] – headkit

我创建了一个[jsfiddle]（http://jsfiddle.net/Twisty/8mtWH/2/）来更好地理解它。我猜'var $ videoblock'是选择电影时会返回的示例内容吗？如果仅在使用本地文件时发生，我们如何复制或解决问题？ – Twisty

我现在设法每次刷新页面来解决这个我关闭videoplayers弹出使用

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

这只是最糟糕的解决方案 - 但至少我可以将其作为“亲属”来提供工作''...

来源

2013-01-14 14:06:11 headkit

另一个解决方法y你可以尝试把它放在像这个人一样fancybox：http://stackoverflow.com/questions/7174573/html-page-onload-show-video-on-a-javascript-blockui – SoluableNonagon

，你可以把视频上另一个页面，然后每次在fancybox弹出页面加载页面。这样，视频总是被重新加载。应该在线或离线文件系统下正常工作。 – SoluableNonagon

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

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

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

来源

2013-01-20 23:16:29 waddlesplash

thanx！这是正确的，但我不被允许启动服务器。 – headkit

即使在您的本地计算机上也没有？您可以阻止它响应非本地请求... – waddlesplash

不允许服务器。 – headkit

Safari中的HTML5-Bug？使用本地文件时视频不起作用

回答

相关问题