HTML5 <Video> reset video after slide

Question 1

I use the carousel slider from Bootstrap. But when I put images and videos in it but when I loop the videos they won't stop looping. But I want them to stop and reset so when it gets back to that slide the video starts from the beginning, not somewhere in the middle of the video. Also I was wondering if it's possible to not set an interval but play the video till the end before going to the next slide.

JS

$("#myCarousel").carousel({
    interval: 4500
});

PHP

<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
    <div class="carousel-item active">
        <img src="">
    </div>
    <div class="carousel-item">
        <video id="myVideo" loop autoplay muted><source src=""></video>
    </div>
    <div class="carousel-item">
        <video id="myVideo" loop autoplay muted><source src=""></video>
    </div>
</div>
</div>

Question 2

I made a JSFiddle. I have removed loop autoplay from the video tags.

$("#myCarousel").carousel({
  interval: 4500
});

$("#myCarousel").on('slid.bs.carousel', function () {
   var vids = $(this).find(".active video");
   if(vids.length > 0){
      vids[0].pause();
      vids[0].currentTime = 0;
      vids[0].play();
   }
})

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
    <div class="carousel-item active">
        <img src="">
    </div>
    <div class="carousel-item">
        <video id="myVideo" muted><source src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>
    <div class="carousel-item">
        <video id="myVideo2" muted><source src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>
</div>
</div>

Question 3

HTML5 Video is just a convention to play a certain video formats with a new element for which browsers will implement an own player. HTML5 won’t provide players or something like that.

You have to look for the codecs and contained supported by most browsers, which, if I remember well, are mostly Theora for Video and Vorbis for audio, in an OGG container.

Then I remember that Webkit browsers will support Matroska (MKV) containers using V8 as video codec and Vorbis for audio.

My recommendation: provide an OGG file with Theora and Vorbis as video and audio codecs respectively. Inside provide a fallback using an MKV file with V8 and Vorbis and then, if you can, inside an MPG video file using Mpeg2 and MP2 (couldn’t think on something better) as video and audio codecs, fallback. Then as the last fallback, a Flash player playing a FLV video file.

Example for how your HTML should look like:

<video src="thevideo.ogg">
    <video src="firstFallback.mkv">
        <object type="video/mpeg" src="secondFallback.mpeg">
            <object
                type="application/x-shockwave-flash"
                src="player.swf?etc...">
                <p>Download <a href="videourl">the video etc...</a><br />
                or use a more modern browser to watch online, etc...</p>
            </object>
        </object>
    </video>
</video>

Etc... ;-)

With this configuration, most (if not all) browsers should be able to play your video, preferring the most supported (and most modern) format. “Fallbacking” until they find a Flash Player.

For hints on what formats to support: take a look at the HTML5 Video part in Wikipedia.

Important: In your code you are refering to an absolute filesystem path, which is totally not-accesible for a web visitor. Maybe in the src you meant /video/file2.m4v.

Question 4

Solution

After some significant Googling I managed to find the missing piece to the puzzle: MediaSource

Effectively the process goes like this:

Create a MediaSource
Create an object URL from the MediaSource
Set the video's src to the object URL
On the sourceopen event, create a SourceBuffer
Use SourceBuffer.appendBuffer() to add all of your chunks to the video

This way you can keep adding new bits of video without changing the object URL.

Caveats

The SourceBuffer object is very picky about codecs. These have to be declared, and must be exact, or it won't work
You can only append one blob of video data to the SourceBuffer at a time, and you can't append a second blob until the first one has finished (asynchronously) processing
If you append too much data to the SourceBuffer without calling .remove() then you'll eventually run out of RAM and the video will stop playing. I hit this limit around 1 hour on my laptop

Example Code

Depending on your setup, some of this may be unnecessary (particularly the part where we build a queue of video data before we have a SourceBuffer then slowly append our queue using updateend). If you are able to wait until the SourceBuffer has been created to start grabbing video data, your code will look much nicer.

<html>
<head>
</head>
<body>
    <video id="video"></video>
    <script>
        // As before, I'm regularly grabbing blobs of video data
        // The implementation of "nextChunk" could be various things:
        //   - reading from a MediaRecorder
        //   - reading from an XMLHttpRequest
        //   - reading from a local webcam
        //   - generating the files on the fly in JavaScript
        //   - etc
        var arrayOfBlobs = [];
        setInterval(function() {
            arrayOfBlobs.append(nextChunk());
            // NEW: Try to flush our queue of video data to the video element
            appendToSourceBuffer();
        }, 1000);

        // 1. Create a `MediaSource`
        var mediaSource = new MediaSource();

        // 2. Create an object URL from the `MediaSource`
        var url = URL.createObjectURL(mediaSource);

        // 3. Set the video's `src` to the object URL
        var video = document.getElementById("video");
        video.src = url;

        // 4. On the `sourceopen` event, create a `SourceBuffer`
        var sourceBuffer = null;
        mediaSource.addEventListener("sourceopen", function()
        {
            // NOTE: Browsers are VERY picky about the codec being EXACTLY
            // right here. Make sure you know which codecs you're using!
            sourceBuffer = mediaSource.addSourceBuffer("video/webm; codecs="opus,vp8"");

            // If we requested any video data prior to setting up the SourceBuffer,
            // we want to make sure we only append one blob at a time
            sourceBuffer.addEventListener("updateend", appendToSourceBuffer);
        });

        // 5. Use `SourceBuffer.appendBuffer()` to add all of your chunks to the video
        function appendToSourceBuffer()
        {
            if (
                mediaSource.readyState === "open" &&
                sourceBuffer &&
                sourceBuffer.updating === false
            )
            {
                sourceBuffer.appendBuffer(arrayOfBlobs.shift());
            }

            // Limit the total buffer size to 20 minutes
            // This way we don't run out of RAM
            if (
                video.buffered.length &&
                video.buffered.end(0) - video.buffered.start(0) > 1200
            )
            {
                sourceBuffer.remove(0, video.buffered.end(0) - 1200)
            }
        }
    </script>
</body>
</html>

As an added bonus this automatically gives you DVR functionality for live streams, because you're retaining 20 minutes of video data in your buffer (you can seek by simply using video.currentTime = ...)

Question 5

Take a look at timeupdate event. https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/timeupdate

var runAtTime = function(handler, time) {
 var wrapped = function() {
     if(this.currentTime >= time) {
         $(this).off('timeupdate', wrapped);
         return handler.apply(this, arguments);
    }
 }
 return wrapped;
};

$('#myVideo').on('timeupdate', runAtTime(myHandler, 3));

http://jsfiddle.net/tarabyte/XTEWW/1/

Question 6

For anyone struggling with the same issue, I found that after the ajax call the video had the property 'paused: true' even thought autoplay was set and I was calling video.play() on 'loadeddata'.

The solution was to trigger video.play() when pause is detected. I also found that it worked smoother not having the 'autoplay' attribute on the video and became jerky after multiple initialisations.

DOM:

<video id="video" loop muted>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

JS:

video = jQuery('#video').get()[0];

video.addEventListener('loadeddata', function() {
    video.play();
});

video.addEventListener('pause', function() {
    video.play();
});

Also, for anyone wondering why I might want this ability, it is for a video playing on the background of a webpage, hence no need for user to play/pause it.

HTML5 <Video> reset video after slide

Answers

Solution

Caveats

Example Code

javascript,php,html,html5-video,carousel