Esorsi Esorsi - 1 year ago 65
HTML Question

How to play a second .mp4 video after one has ended?

I am currently working on a project where it plays a .mp4 file, and after the .mp4 file has ended, it will select another .mp4 file to play.

I'm trying to copy the mechanics of a television.
It plays an episode of a show, then plays another episode.

After the .mp4 file ends, I would like for it to autoplay another .mp4 file.

This is the code I have so far:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>HTML Television</title>
* {
margin: 0; /* fallback style */
margin: initial;
html {
background-color: black;
color: white;
video {
display: block;
margin: 0 auto;
max-height: 200vh;
max-width: 400vw;

<section id="videos">

<video poster="video3.png" controls="controls" preload="none">
<source type="video/mp4" src="../TV/TV/1.mp4">
<video poster="" controls="controls" preload="none">
<source type="videp/mp4" src="../TV/Commercial/1.mp4">
(function () {
"use strict";
var videosSection = document.getElementById("videos");
var videosSectionClone = videosSection.cloneNode();
var videos = videosSection.getElementsByTagName("video");
var randomVideo = videos.item(Math.floor(Math.random() * videos.length)).cloneNode(true);
randomVideo.setAttribute("preload", "auto");
videosSection.parentNode.replaceChild(videosSectionClone, videosSection);;

How can I do this?

Answer Source

Try Html5 video onended event.


<video id="episodeVideo" width="100%" autoplay onended="run()">
    <source src="episode/video1.mp4" type='video/mp4'/>


var video_count =1;
var videoPlayer = document.getElementById("episodeVideo");

function run(){
        if (video_count == 4) video_count = 1;
        var nextVideo = "episode/video"+video_count+".mp4";
        videoPlayer.src = nextVideo;;

check details of Event