Add additional video control options for HTML5 Video

 HTML5 video video playback function can be said to be an important function of HTML5 . Although the built-in HTML5 video player in the browser has almost all control options, sometimes the design of the content still requires additional control options to match the overall Style, based on the API connection function of the browser DOM , we can easily create additional control function keys to bridge the HTML5 video player to achieve the function of controlling the video playback, such as start playing, pause the video or adjust the video display Size etc.

HTML5 Video basic syntax

<video src="Video link" controls></video>

There are many techniques for video links and controls in the grammar. Please refer to the HTML5 video video tag for the detailed grammar .

Example 1: Control the size of HTML5 Video

<script language="javascript">
function Control(x){
if(x=='start'){
　document.getElementById("MovieShow").play();
}else if(x=='stop'){
　document .getElementById("MovieShow").pause();
}}
</script>
<video id="MovieShow" width="360" height="270">
<source src="video/test.ogg" type=" video/ogg">
<source src="video/test.mp4" type="video/mp4">
Your browser does not support this HTML5 video tag
</video>
<br><br>
<input type="button "value="Start playing" onclick="Control('start');">
<input type="button" value="Pause playback" onclick="Control('stop');">

In the example, buttons to start playing and pause the movie are made. When one of these buttons is selected, a JavaScript event will be triggered to communicate with the Video . The movie with id of MovieShow is obtained through the document.getElementById of the DOM and requested to play ( play) or pause (pause), the default video will not be played when the web page is loaded, so the pause function is not available at the beginning. After you choose to play the video, you can use the pause function at any time. It will continue to play at the point in time when it was paused, instead of restarting. Of course, you can also use JavaScript if...else... to create a single button that integrates the pause and play functions. Example 2: Control the pause and play of HTML5 Video

<script language="javascript">
function Size(x){
if(x=='big'){
　document.getElementById("MovieShow2").width=500;
　document.getElementById("MovieShow2").height=450;
}else if(x=='small'){
　document.getElementById("MovieShow2").width=260;
　document.getElementById("MovieShow2").height=234;
}}
</script>
<video id="MovieShow2 "width="360" height="270" controls>
<source src="video/test.ogg" type="video/ogg">
<source src="video/movie.mp4" type="video/mp4" >
Your browser does not support this HTML5 video tag
</video>
<br><br>
<input type="button" value="The player becomes bigger" onclick="Size('big');">
<input type="button" value="The player becomes smaller" onclick="Size('small') ;">

The way to control the size of the player is similar to the previous example, but it should be noted that the size of the HTML5 video player needs to be set at the same time as the width (width) and height (height) to avoid flaws. It is not like HTML img . In the browser, as long as the width is given, the picture size will usually be automatically scaled. The HTML5 video video itself may be scaled proportionally, but the entire playback range is not automatically scaled by every browser, so the designer is making adjustments When functioning, you should calculate the ratio of width to height and write it into the code to try to avoid unintended pushing of web pages when netizens use the resizing function.