2

I try to build a local JS-based mediathek with HTML5 video. the code is the same like in this JSBIN, where it is working well for online content. but when I use this code with local files (like you could find here) Safari throws the error

INVALID_STATE_ERR: DOM Exception 11: An attempt was made to use an object that is not, or is no longer, usable.

after starting the video the third time by klicking on the thumb image, which opens the player and loads the video URL.

the error comes from '$vplayer.currentTime = 0.0;' without this line the problem stays, but no error is thrown at all.

I know this error means that the video is not loaded and it is caused by - but why did it load the first two times before?

edit: I also tried different approaches with absolute paths from 'file://' to 'file:///' - nothing changes.

edit: I found out that this behaviour is gone when using the browser engine of a objective-c WebView component (iOS). also it works when using chrome. so it seems to be a bug of safari?

the code used:

<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>

and

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

Sadly, a lot of browsers don't like working with local files. Firefox does not have this specific problem, but it has other ones (related to CSS/WOFF fonts).

The solution I use is to have a local development web server (like XAMPP), and then using various web browsers to test. You should be able to setup firewall options to only allow the Apache server on your computer, and not out on your local network.

Plus, you get PHP/Perl/etc. and other scripting languages you don't get on just local files.

于 2013-01-20T23:16:29.813 回答
1

I now managed to work around this by refreshing the page every time I close the videoplayers popup using

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

this is only the worst case workaround solution - but at least I can deliver this as 'kind of working'...

于 2013-01-14T14:06:11.477 回答