Home/ Questions/Q 9123333
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T06:18:50+00:00

I try to build a local JS-based mediathek with HTML5 video. the code is

  • 0

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

});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0