HTML5 video视频制作，控制按钮

最新推荐文章于 2024-06-12 15:33:32 发布

不做大多数

最新推荐文章于 2024-06-12 15:33:32 发布

阅读量4.3k

点赞数 9

分类专栏：个人学习文章标签： html5 javascript html

本文链接：https://blog.csdn.net/qq_44023710/article/details/115140490

版权

个人学习专栏收录该内容

29 篇文章 2 订阅

订阅专栏

HTML5 video视频制作，控制按钮

在这里插入图片描述
运用html5 vedio标签，结合JavaScript完成对播放，暂停，静音，全屏，加速，减速，快进，后退，音量控制，时长控制功能的实现

以下为所写代码

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

<head>
    <meta charset="UTF-8">
    <title>DIY视频</title>
</head>

<body>
    <figure style="text-align: center">
        <figcaption style="margin: 10px">DIY视频播放器</figcaption>
        <video id="video" src="./fun.mp4" style="width: 500px;">
            <span>您的浏览器不支持video标签，请换个浏览器试一下吧</span>
        </video>
        <div>
            <progress id="progress" value="0" max="100" style="width: 450px;"></progress>
            <span id="curTime">00:00</span>/<span id="totalTime">02:44</span>
        </div>
        <div>
            <button id="btn_play" onclick="playVideo()">播放</button>
            <button id="btn_pause" onclick="pauseVideo()">暂停</button>
            <button id="btn_muted" onclick="mutedVideo()">静音</button>
            <button id="btn_fullScreen" onclick="fullScreen(video)">全屏</button>
            <input type="range" value='1' name="range" id="btn_volume" min="0" max="1" step='0.1' onchange="change()">
            <button id="btn_go" onclick="speed()">加速</button>
            <button id="btn_back" onclick="slow()">减速</button>
            <button id="go_five" onclick="add()">快进5s</button>
            <button id="back_five" onclick="back()">后退5s</button>
        </div>
    </figure>
</body>

<script type="text/javascript">
    //播放
    var myVideo = document.getElementById("video");  //获取的id应该为视频的id，不能直接用btn_play
    function playVideo() {
        myVideo.play();
    }

    //暂停
    var myVideo = document.getElementById("video");
    function pauseVideo() {
        myVideo.pause();
    }

    //静音
    var myVideo = document.getElementById("video");
    function mutedVideo() {
        myVideo.muted = true;  //muted为布尔类型。直接设置true或者false为参数
    }

    //全屏
    var myVideo = document.getElementById("video");
    function fullScreen(ele) {
        if (ele.mozRequestFullScreen) {
            ele.mozRequestFullScreen();//火狐浏览器
        } else if (ele.webkitRequestFullscreen) {
            ele.webkitRequestFullscreen();//谷歌浏览器
        } else if (ele.oRequestFullscreen) {
            ele.oRequestFullscreen(); //opera浏览器
        } else if (ele.msRequestFullscreen) {
            ele.msRequestFullscreen();  //ie浏览器
        } else if (ele.requestFullscreen) {
            ele.requestFullscreen();
        }
    }

    //加速
    var myVideo = document.getElementById("video");
    function speed() {                  //只有 Google Chrome 和 Safari 支持 playbackRate 属性
        myVideo.playbackRate = 2.0;  //设置2倍速播放。
    }

    //减速
    var myVideo = document.getElementById("video");
    function slow() {
        myVideo.playbackRate = 0.5;  //设置0.5倍速播放。
    }

    //快进5s
    var myVideo = document.getElementById("video");
    function add() {
        myVideo.currentTime = video.currentTime + 5;
    }

    //后退5s
    var myVideo = document.getElementById("video");
    function back() {
        myVideo.currentTime = video.currentTime - 5;
    }
    //进度条时间
    video.ontimeupdate = function () {
        var pg = document.getElementById('progress');  //获取进度条id
        pg.value = video.currentTime / video.duration * 100;
        var min = Math.floor(video.currentTime / 60);
        var sec = Math.floor(video.currentTime % 60);
        min = min < 10 ? ("0" + min) : min;
        sec = sec < 10 ? ("0" + sec) : sec;
        document.getElementById("curTime").innerHTML = min + ":" + sec;
        // curTime.innerHTML = Math.floor(video.currentTime/60); //当前播放时间
        // totalTime.innerHTML.value =Math.floor(video.duration%60) ; //总时间

    }

    //音量
    function change() {
        video.volume = document.getElementById("btn_volume").value;
    }

</script>

</html>

html5新增的video属性
在这里插入图片描述
总结：controls和autoplay是布尔属性，对于高版本浏览器，必须结合muted属性才能自动播放，尽量不要使用自动播放功能，如果需要兼容浏览器，请使用以下代码：

最后，附上常用的video和audio方法：

不做大多数

关注

9
点赞
踩
31

收藏

觉得还不错? 一键收藏
1
评论
HTML5 video视频制作，控制按钮

HTML5 video视频制作，控制按钮运用html5 vedio标签，结合JavaScript完成对播放，暂停，静音，全屏，加速，减速，快进，后退功能的实现以下为所写代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>DIY视频</title></head><body> <f
复制链接

扫一扫