Geek Answers Handbook

Audio persists after deleting <video> element in Chrome

I'm having issues with video support in Chrome. My webpage should run in Chrome, and I use the following code to periodically check if the webpage should play the video or not ... but the problem is that after deleting the item, I still hear the sound and when I recreate the item, audio of new video and old floors.

function showVideo() { var video = videodata; var videobox = $('#videobox').first(); var videoplayer = $('#videoplayer').first(); if (video.Enabled) { if ((videoplayer.length > 0 && videoplayer[0].currentSrc != video.Location) || videoplayer.length == 0) { videobox.empty(); videobox.append('<video id="videoplayer" preload="auto" src="' + video.Location + '" width="100%" height="100%" autoplay="autoplay" loop="loop" />'); videobox.show(); } } else { videobox.hide(); videobox.empty(); // Clear any children. } }

How can i decide?

Thanks.

+7
source share
4 answers

Next was the minimum I had to do to get it to work. I really experienced a stall due to buffering, while spawning ajax requests when the user clicked the back button. Pausing a video in the Chrome browser and the Android browser saved its buffering. A non-async ajax request is stuck waiting for buffering to complete, which will never happen.

Binding this to the beforeSthide event fixed it.

  $("#SOME_JQM_PAGE").live("pagebeforehide", function(event) { $("video").each(function () { logger.debug("PAUSE VIDEO"); this.pause(); this.src = ""; }); });

This will clear every video tag on the page.

+9
source

try to create the "video" tag empty in html and create the "source" tag in javascript code

 <html> . . <video id="main-video" autoplay=""></video> . . </html> <script> $('#main-video').append('<source type="video/mp4" src="URL.mp4">'); </script>
+1
source

In my case, I had to pause the video first before deleting it, otherwise the sound is still playing in the background. The reason I used the pause is because there is no stop () function on the html5 element.

  } else { videobox.hide(); // you can add something like this $("#videoplayer").pause(); videobox.empty(); // Clear any children. }
0
source

try (based on SimpleCode answer):

function showVideo() { var video = videodata;

  var videobox = $ ('# videobox'). first ();
     var videoplayer = $ ('# videoplayer'). first ();

     if (video.Enabled) {
         if ((videoplayer.length> 0 && videoplayer [0] .currentSrc! = video.Location) || videoplayer.length == 0) {
             videobox.empty ();
             videobox.append ('<video id = "videoplayer" preload = "auto" src = "' + video.Location + '" width = "100%" height = "100%" loop = "loop" />');
             videobox.show ();
             document.getElementById ("videoplayer"). play ();
         }
     } else {
         document.getElementById ("videoplayer"). pause ();
         videobox.hide ();
         videobox.empty ();  // Clear any children.
     }
 }
0
source

More articles:


All Articles