H5学习之2 video标签的使用_video 标签中间加button-优快云博客

本文介绍如何使用HTML的video标签及JavaScript控制视频播放状态，并通过按钮实现视频大小的调节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div style="text-align:center">  <!--一个div 包含了3个按钮，一个视频标签。使用style属性设置其为居中-->
    <!--按钮-->
    <button onclick="playPause()">播放/暂停</button>
    <button onclick="makeBig()">大</button>
    <button onclick="makeNormal()">中</button>
    <button onclick="makeSmall()">小</button>
    <!--Onclick= “xxx()”  xxx()为函数名字
    此句为当点击按钮的时候激活函数
    函数需要写在script 标签里-->

    <br/> <!--换行-->

    <video id="video1" width="420" style="margin-top:100px">
        <!--设定ID 设定宽度 style="margin-top:100px"为设定与上方按钮的距离为100像素
        video 还有一个controls属性 设置值为 controls .可以出现一个控制开始 暂停  声音 全屏的 按钮条。
        -->
    <source src="video/mov_bbb.mp4" type="video/mp4"> <!--定义视频来源 以及类型。type不加也可以正常播放-->
    </video>

    <br/>
    <!--还可以将src直接放在video标签里，例如：-->
    <video src="video/mov_bbb.mp4" controls="controls">
    </video>
</div>

<script type="text/javascript">
    var myVideo = document.getElementById("video1");//定义一个元素来获取创建的video元素

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

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

    function makeNormal() {
        myVideo.width = 420;
    }

    function makeSmall() {
        myVideo.width = 320;
    }

</script>

</body>
</html>

div标签用来保存3个按钮的位置。属性style="text-align:center" 将3个按钮设置成居中

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

video标签是用来加载视频的。id是其id，可以直接通过其width属性来设定width值，属性style="margin-top:100px"来设置成与上方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