html video 视频.html

最新推荐文章于 2022-06-27 07:24:01 发布

学无止境慢慢来

最新推荐文章于 2022-06-27 07:24:01 发布

阅读量4.8k

点赞数

分类专栏： html

原文链接：https://www.runoob.com/html/html5-video.html

版权

html 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8">     
    <title>html video 视频</title> 
</head>
<body>
<div style="text-align:center">
    <button οnclick="playPause()">播放/暂停</button>
    <button οnclick="makeBig()">放大</button>
    <button οnclick="makeSmall()">缩小</button>
    <button οnclick="makeNormal()">普通</button>
    <br>
    <video id="video1" width="420" controls>
        <source src="video/视频1.mp4" type="video/mp4">
        <source src="video/视频2.mp4" type="video/mp4">
        您的浏览器不支持 HTML5 video 标签。
    </video>
</div>

<script>
    /*参考：https://www.runoob.com/html/html5-video.html
    * 知识点：
    *   1.video 是行内元素，但是 支持设置 width。
    *   2.myVideo.paused 当前视频的状态：播放/暂停（播放前，播放完后都算暂停）。
    *   3.myVideo.played -> TimeRanges {length: 1} 播放时长 1 min 以内？
    *   4.myVideo.onplay 播放事件。myVideo.onpause 暂停事件。myVideo.onended 播放完事件（此事件会先触发暂停事件）。*/
    let myVideo = document.getElementById("video1");
    myVideo.onplay = function () {
        console.log("playing");
    };
    myVideo.onpause = function () {
      console.log("paused");
    };
    myVideo.onended = function () {
      console.log("ended");
    };

    function playPause() {
        if (myVideo.paused) {
            myVideo.play();
            // console.log("myVideo.paused:", myVideo.paused);
            // console.log(myVideo.played);
        } else {
            myVideo.pause();
        }
    }

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

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

    function makeNormal() {
        myVideo.width = 420;
    }
</script>
</body>
</html>

学无止境慢慢来

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html video 视频.html

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>html video 视频</title></head><body><div style="text-align:center"> <button onclick="playPause()">播放/暂停</button>...
复制链接

扫一扫