0

I Want to Like This

  <script>
$("video").on("click", function() {

// All but not this one - pause
$("video").not( this ).each(function() {
     this.pause();

});
// Play this one
// this.play();

// Or rather toggle play / pause
this[this.paused ? "play" : "pause"]();

});


<video id=”myVideo” src="<?php echo $_REQUEST['video']; ?>"></video>

anyone can please help me please above is my code. Thanks STACKOVERFLOW

Music Company
  • 11
  • 7
  • Possible duplicate of [How to make a loading image when loading HTML5 video?](https://stackoverflow.com/questions/9097605/how-to-make-a-loading-image-when-loading-html5-video) – rafaelcastrocouto Jan 05 '19 at 09:37

1 Answers1

1

Use the poster attribute and a class to add some style, and remove them on the canplay event.

$('video').on('loadstart waiting seeking stalled', function (event) {
  $(this).addClass('loading');
});
$('video').on('canplay seeked play', function (event) {
  $(this).removeClass('loading');
});
video.loading {
  background: black url(/images/loader.gif) center center no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<video src="/videos/movie.mp4" poster="/images/poster.jpg" controls></video>
rafaelcastrocouto
  • 11,781
  • 3
  • 38
  • 63
  • 1
    but what about if video load first time and it starts but if the video does not completely load then how can I show again loading gif – Music Company Jan 05 '19 at 18:11
  • For that you can use the `waiting` event. There's also the case when the user changes the current time and a new chunk needs to be loaded, for this one you can use `seeking`. Read more about media events [here](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events) – rafaelcastrocouto Jan 06 '19 at 02:09
  • I'm trying to make a demo but it's very inconsistent across browsers. Do you want the old, ugly, cross-browser solution or the new, clean and not fully supported one? – rafaelcastrocouto Jan 06 '19 at 13:31
  • 1
    you can give me demo old new its not important – Music Company Jan 06 '19 at 20:05
  • I updated the question with the new events but I haven't tested. If it works you can check this as answered. – rafaelcastrocouto Jan 07 '19 at 01:53
  • ok send the codes I will check and give you feedback your codes – Music Company Jan 07 '19 at 07:38