HTML5 through the vedio tag video loop play example code

Time:2020-12-1

Before HTML5, the video was played through < embed > tag

The < embedded > tag is used to embed multimedia elements in HTML pages

<embed src=”1.swf”width=”400″>

The < Object > tag is used to embed multimedia elements in HTML pages

<object data=”1.swf”width=”400″></object>

Existing problems:

Need flash, low efficiency

If the browser does not support flash, the video will not play

The iPad and iPhone can’t display flash video

Convert the video to a different format and still not play in all browsers

After HTML5, it’s much easier to play web videos. One < vedio > < / vedio > solves all the problems. Without much nonsense, it goes straight to the main topic

I use hbuilder to write HTML5 code, and I think the software is good. (the main reason is that the shortcut keys and interface layout of the software are very similar to eclipse. For me who is used to eclipse operation, I feel like seeing my old friend again. I have no idea.)

First create a new web project and put the resource file into the project. The directory structure is as follows:

And then directly in the index.html Just write the code in


<video id="myVedio" autoplay="autoplay" controls="controls" width="800px">
	<source src="video/1.webm"></source>
</video>

The purpose of setting autoplay in the vedio tab is to automatically play the video after loading the page. Controls adds a control bar tool

The < source > tag sets the video position through SRC, and the effect is as follows:

That’s the magic of the < vedio > tag, which takes just one tag to do everything

After that, set the play list to play the corresponding video after clicking the list:

Add < UL >, < li > to display the list

<ul>
	<li>Video 1</li>
	<li>Video 2</li>
	<li>Video 3</li>
</ul>

For better display effect, you can add CSS style and add background color to the video being played:

li {
	list-style: none;
        background-color: black;
	color: white;
	text-align: center;
	margin: 5px auto;
	width: 800px;
	Font family: "regular script";
	font-size: 30px;
}

After the display effect:

The next step is to write a script to control the click list to play the video

var myVideo =  document.getElementById ("myvedio"); // get the vedio tag instance through JS
var vedioLi =  document.getElementsByTagName ("Li"); // get video list
 
Bmwe. 2 "," array of videos "
Var arrynumber = 0; // set the default playback position to facilitate subsequent loop playback

Add onclick() method to the video list through the for loop to realize that the corresponding video will be played according to which point is selected

for(var j = 0; j <  vedioLi.length // is the length of the loop
	vedioLi[j].onclick = function() {
	        for(var m = 0; m < vedioLi.length; m++) {
	                vedioLi[m]. style.backgroundColor  ="Black"; // set the background to black for each class table
	        }
                for(var i = 0; i < vedioLi.length; i++) {
		        If (vedioli [i] = = this) {// judge whether the item in the point is the item
		                vedioLi[i]. style.backgroundColor  ="DarkGray"; // set the background after clicking to gray
		                Arrynumber = I; // sets the current playback to the selected subscript
		                myVideo.src  ="Video /" + vedionary [i]; // set to play video
		                myVideo.play (); // start playing
	                }
	        }
        }
}

Next, loop playback is realized

myVideo.addEventListener ("ended", function() {// add an end listener for vedio, and execute the corresponding function after the video is played
	if(arryNumber == ( vedioArry.length  -1)) {// judge whether the last video is reached
	        vedioLi[ vedioLi.length  - 1]. style.backgroundColor  ="Black"; // sets the previous list color to black
		vedioLi[0]. style.backgroundColor  ="DarkGray"; // sets the current video to gray
		myVideo.src  ="Video / + vedionary [0]; // play the first video
		myVideo.play();
		Arrynumber = 0; // reset the subscript to 0
	} else {
		Arrynumber + = 1; // the subscript is increased by one every time it is played
		myVideo.src = "video/" + vedioArry[arryNumber];
		vedioLi[arryNumber].style.backgroundColor = "darkgray";
		vedioLi[arryNumber - 1].style.backgroundColor = "black";
		myVideo.play();
	}
 
});

The results are as follows:

This article on the HTML5 video loop through the video tag to introduce the sample code, more relevant HTML5 video loop playback content, please search the previous articles of developeppaer or continue to browse the related articles below, I hope you can support developeppaer more in the future!