Video标签学习

来源：互联网发布：淘宝网上如何退货编辑：程序博客网时间：2024/06/07 10:04

截图
这里写图片描述

通过视频下方的按钮，控制视频的播放，暂停，快进，音量控制等
html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>video</title>    <style>        #myvideo {            display: block;            width: 600px;            margin-bottom: 10px;        }        button {            width: 100px;            height: 30px;            font-size: 1.5em;            margin-right: 10px;        }        #progress {            width: 600px;            margin-bottom: 10px;        }    </style></head><body>    <video id="myvideo">        <source src="video/section2.mp4" type="video/mp4">    </video>    <input type="range" id="progress" min="0" max="100" step="1" value="0">    <br>    <button id="play">Play</button>    <button id="stop">Stop</button>    <button id="ff">ff</button>    <button id="fb">fb</button>    <input type="range" id="volume" min="0" max="10" step="1">    <br>    <script src="test.js"></script></body></html>

window.onload = function() {    var video = document.querySelector("#myvideo");    var play = document.querySelector("#play");    var stop = document.querySelector("#stop");    var ff = document.querySelector("#ff");    var fb = document.querySelector("#fb");    var progress = document.querySelector("#progress");    var volume = document.querySelector("#volume");    var played = false;    play.onclick = function() {        if (!played) {            video.play();            this.innerText = "Pause";            played = true;        } else {            video.pause();            this.innerText = "Play";            played = false;        }    };    stop.onclick = function() {        video.currentTime = video.duration;    };    ff.onclick = function() {        if (video.currentTime <= video.duration) {            video.currentTime += 3;        }    };    fb.onclick = function() {        if (video.currentTime >= 0) {            video.currentTime -= 3;        }    };    video.ontimeupdate = function() {        progress.value = this.currentTime/this.duration*100;    };    progress.onchange = function() {        video.currentTime = this.value/100*video.duration;    };    volume.onchange = function() {        video.volume = this.value/10;    };};

0 0