小熊视频播放H5

无名之悲

已于 2022-04-18 10:21:45 修改

阅读量118

点赞数

文章标签： html5

于 2022-03-19 11:58:12 首次发布

本文链接：https://blog.csdn.net/weixin_52554179/article/details/123591462

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频控制</title>
    <style>
    body {
        text-align: center;
    }

    div {
        margin-top: 20px;
    }
    </style>
</head>

<body>
    <h1 align="center">视频控制</h1>
    <div>
        <button id="play">播放</button>
        <button id="big">大</button>
        <button id="mid">中</button>
        <button id="small">小</button>
    </div>
    <div>
        <video controls="controls" id="va" width="300" ,height="300" src="bear.mp4">
        </video>
    </div>
  
    <script>
   <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频控制</title>
    <style>
    body {
        text-align: center;
    }

    div {
        margin-top: 20px;
    }
    </style>
</head>

<body>
    <h1 align="center">视频控制</h1>
    <div>
        <button id="play">播放</button>
        <button id="big">大</button>
        <button id="mid">中</button>
        <button id="small">小</button>
    </div>
    <div>
        <video controls="controls" id="va" width="300" ,height="300" src="bear.mp4">
        </video>
    </div>
  
    <script>
        
    var c = document.getElementById("va");
    var btn_play=document.getElementById("play");

    btn_play.onclick=function(){
        if (btn_play.innerText=="播放") {
            c.play();
            btn_play.innerText="暂停";
        } else{
            c.pause();
            btn_play.innerText="播放";
        }
    }

  document.getElementById("big").onclick=function() {
        c.width = "400"
        c.height = "400"
    }

   document.getElementById("mid").onclick=function() {
        c.width = "300"
        c.height = "300"
    }

  document.getElementById("small").onclick=function(){
        c.width = "200"
        c.height = "200"
    }

    </script>
</body>

</html>

   </script>
</body>

</html>

无名之悲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小熊视频播放H5

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>视频控制</title> <style> body { text-ali..
复制链接

扫一扫