Html5-video tag-Achieve click Preview to play or pause video __html

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.