html5-video Tag-realize click Preview to play or pause video
Just joined the work, began to contact with some new knowledge, prompted me to begin to understand the new features of HTML5 and CSS3. At this time I really found HTML5 and CSS3 strong.
The previous control over video was more complex to implement, but with the addition of <video> tags and the corresponding Dom in the HTML5, we were able to make more simple controls on the video in the Web page with this new feature.
The following attribute contents are extracted to W3cschool
Browser support:
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support tags.
Note: Internet Explorer 8 and earlier versions do not support labels.
Definitions and usage
A label defines a video, such as a movie fragment or other video stream.
Tips and comments
Tip: You can place textual content between the start and end tags so that older browsers can display information that doesn't support the label.
Property:
The new attribute in the NEW:HTML5.
Property |
value |
description |
Auto Play |
AutoPlay |
If this property appears, the video plays immediately after it is ready. |
controls |
controls |
If this property appears, the control is displayed to the user, such as a play button. |
height |
pixels |
Sets the height of the video player. |
loop |
Loop |
If this property occurs, it starts playing again when the media file finishes playing. The |
muted |
muted |
stipulates that the audio output of the video should be muted. |
poster |
URL |
Specify the image that is displayed when the video is downloaded, or the image displayed before the user clicks the play button. |
preload |
preload |
If this property occurs, the video loads when the page loads and prepares to play. If "autoplay" is used, the property is ignored. The URL of the video to play for |
src |
url |
. |
width |
pixels |
To set the width of the video player. |
Click the video preview to achieve playback or pause video
To set the preview of the video first, the poster property in <video> completes the work well.
About video playback control need to use the DOM event, here is not detailed, and later have the opportunity to carry out its detailed properties. This is mainly used to play (), pause () the two events.
Here's a couple of days that you've written to achieve video playback or pausing by clicking on a video preview
HTML section:
<div class= "Video_main DW" >
<ul>
<li class= "Video_main_video left" >
<video id= " VideoPlay1 "width=" 262 "height=" 195 "src=" Video/audio.mp4 "poster=" img/video.jpg "loop=" Loop "x-webkit-airplay=" true "Webkit-playsinline=" true >
your browser does not support playback of this video, please upgrade to the latest version of the browser.
</video>
</li>
</ul>
</div>
JS section:
var Video1=document.getelementbyid ("CideoPlay1");
Video1.onclick=function () {
if (video1.paused) {
video1.play ();
} else{
video1.pause ();
}
CSS part of the video playback does not affect the temporary will not be posted here.