HTML5 video视频制作,控制按钮

HTML5 video视频制作,控制按钮

HTML5 video视频制作,控制按钮_第1张图片
运用html5 vedio标签,结合JavaScript完成对播放,暂停,静音,全屏,加速,减速,快进,后退,音量控制,时长控制功能的实现

以下为所写代码


<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:00span>/<span id="totalTime">02:44span>
        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()">快进5sbutton>
            <button id="back_five" onclick="back()">后退5sbutton>
        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属性
HTML5 video视频制作,控制按钮_第2张图片
总结:controls和autoplay是布尔属性,对于高版本浏览器,必须结合muted属性才能自动播放,尽量不要使用自动播放功能,如果需要兼容浏览器,请使用以下代码:
HTML5 video视频制作,控制按钮_第3张图片
最后,附上常用的video和audio方法:
HTML5 video视频制作,控制按钮_第4张图片
HTML5 video视频制作,控制按钮_第5张图片

你可能感兴趣的:(个人学习,html5,javascript,html)