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