H5学习之二：深入探索video标签的使用技巧

html>
lang="en">

    charset="UTF-8">
    



color:#a5c261">"text-align:center">  
 
 Onclick="playPause()">播放/暂停
    Onclick="makeBig()">大
    Onclick="makeNormal()">中
    Onclick="makeSmall()">小
    

 
 

 

    

    
 

div标签用来保存3个按钮的位置。 属性 将3个按钮设置成居中

button标签是按钮，属性Onclick="xxx()"点击时执行的函数，函数写在script里.

video标签是用来加载视频的。id是其id，可以直接通过其width属性来设定width值，属性来设置成与上方div的间隔距离，内部的source标签用来定义视频的位置，以及类型。src是视频位置，type是类型。

此外，src可以直接当成 video的属性来使用定义视频位置，video的属性controls是用来设置一个控制条。

函数要写在script标签里，属性type="text/Javascript"

script可以加在body标签里。

需要定义一个元素来获取 视频，用以控制视频的各种属性。

var myVideo = document.getElementById("video1");

这句用xx来获取id为id1的元素,在下边的函数里控制xx即可控制id1

function playPause() {
    if (myVideo.paused)
        myVideo.play(); // video标签的一种方法
    else
 myVideo.pause();// video标签的一种方法
}

myVideo是获取的视频，if(myVideo.paused)判断视频是否暂停，myVideo.paly()播放视频，myVideo.pause()暂停视频。

function makeBig() {
    myVideo.width = 560;
}

来直接修改视频的宽度。

下边几个函数同理。

具体效果如下

video标签的其他属性:

w3链接 http://www.w3school.com.cn/tags/tag_video.asp