HTML5（video属性方法以及事件&canvas&缓存）

最新推荐文章于 2025-06-23 13:40:40 发布

原创最新推荐文章于 2025-06-23 13:40:40 发布 · 5k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5 #video属性方法以及事件 #canvas #缓存

html5 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了HTML5视频元素的各种属性和事件，包括如何使用JavaScript控制视频播放，以及Canvas元素的绘图方法，如填充矩形、绘制圆、线条、渐变填充和文本，还涉及了图像绘制和清除区域等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

video

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放
controls	controls	如果出现该属性，则用户显示控件，比如播放按钮
height	pixels	设置视频播放器的高度
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放
muted	muted	如果出现该属性，视频的音频输出为静音
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮
preload	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并与被播放，如果使用“autoplay ”则忽略该属性
src	URL	要播放的视频为URL
width	pixels	设置视频播放器的宽度

远程地址火狐不能识别，谷歌可以
html代码写法：

<video id="vid" src="./mp4/mda-jbfh0uwx7hsfahxn.mp4"></video>

获取video对象

 var video = document.querySelector("#vid");

video.currentTime = value; //当前播放的位置（总时间），赋值可改变位置（时间）
video.startTime;//一般为0，如果为流媒体或者不从0开始的资源，则不为0
video.duration; //总时间
video.paused; //是否暂停
video.defaultPlaybackRate = value;//默认的播放速度，不可以设置
video.playbackRate = value;//当前播放速度，设置后马上改变
video.ended; //是否结束
video.autoPlay; //是否自动播放
video.loop; //是否循环播放
video.play(); //播放
video.pause(); //暂停

*** //视频控制 ***

Media.controls;//是否有默认控制条
Media.volume = value; //音量
Media.muted = value; //静音（true时为静音）
HTML5 Audio/Video 事件

事件	描述
abort	当音频/视频的加载已放弃时
canplay	当浏览器可以播放音频/视频时
canplaythrough	当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange	当音频/视频的时长已更改时
emptied	当目前的播放列表为空时
ended	当目前的播放列表已结束时
error	当在音频/视频加载期间发生错误时
loadeddata	当浏览器已加载音频/视频的当前帧时
loadedmetadata	当浏览器已加载音频/视频的元数据时
loadstart	当浏览器开始查找音频/视频时
pause	当音频/视频已暂停时
play	当音频/视频已开始或不再暂停时
playing	当音频/视频在已因缓冲而暂停或停止后已就绪时
progress	当浏览器正在下载音频/视频时
ratechange	当音频/视频的播放速度已更改时
seeked	当用户已移动/跳跃到音频/视频中的新位置时
seeking	当用户开始移动/跳跃到音频/视频中的新位置时
stalled	当浏览器尝试获取媒体数据，但数据不可用时
suspend	当浏览器刻意不获取媒体数据时
timeupdate	当目前的播放位置已更改时
volumechange	当音量已更改时
waiting	当视频由于需要缓冲下一帧而停止

下面是自己用以上述新那个方法以及事件写了一个简单的案例，做了一个控制条

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .par{
            position: relative;
            width: 940px;
            height: 500px;
            margin: auto;
            background: black;
        }
        #vid{
            width: 100%;
            height: 100%;
       }
        .block{
            width: 100%;
            height: 50px;
            position: absolute;
            left: 0;
            bottom: 40px;
        }
        .btn{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: deepskyblue;
            display: inline-block;
            font-size: 14px;
            text-align: center;
            line-height: 40px;
            color: white;
        }
        .proess{
            position: relative;
            width: 500px;
            height: 5px;
            border: 1px solid white;
            border-radius: 10px;
            display: inline-block;
        }
        .dian{
            position: absolute;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: greenyellow;
            left: 0;
            top: -5px;
        }
        .color{
            background: yellow;
            height: 100%;
            width: 0;
        }
        .jingproess{
            position: relative;
            width: 100px;
            height: 5px;
            border: 1px solid white;
            border-radius: 10px;
            display: inline-block;
        }
        .jingdian{
            position: absolute;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: greenyellow;
            left: 0;
            top: -5px;
        }
        .jingcolor{
            background: yellow;
            height: 100%;
            width: 0;
        }
        .current,.alltime,.xian{
            color: white;
            display: inline-block;
            font-size: 15px;
        }

    </style>
</head>
<body>
<div class="par">
    <video  src="./mp4/mda-jbfh0uwx7hsfahxn.mp4" id="vid" controls></video>
    <div class="block">
        <div class="btn start">开始</div>
        <div class="btn back">后退</div>
        <div class="btn forward">前进</div>
        <div class="proess">
            <div class="color"></div>
            <div class="dian"></div>
        </div>
        <div class="current"></div>
        <div class="xian">/</div>
        <div class="alltime"></div>
        <div class="btn jingyin">静音</div>
        <div class="jingproess">
            <div class="jingcolor"></div>
            <div class="jingdian"></div>
        </div>
        <div class="full btn">全屏</div>
    </div>
</div>
<script>
    var start=document.querySelector(".start");
    var back=document.querySelector(".back");
    var forward=document.querySelector(".forward");
    var video=document.querySelector("#vid");
    var proess=document.querySelector(".proess");
    var dian=document.querySelector(".dian");
    var par=document.querySelector(".par");
    var color=document.querySelector(".color");
    var jingyin=document.querySelector(".jingyin");
    var jingproess=document.querySelector(".jingproess");
    var jingcolor=document.querySelector(".jingcolor");
    var jingdian=document.querySelector(".jingdian");
    var full=document.querySelector(".full");
    var current=document.querySelector(".current");
    var alltimer=document.querySelector(".alltime");
    var time=null;
   start.onclick=function(){
       if(this.innerHTML=="开始"){
           video.play();
           this.innerHTML="暂停";
           video.playbackRate=1;
           clearInterval(time);
       }
       else{
           video.pause();
           this.innerHTML="开始";
       }
   };
    full.onclick=function(){
        if(video.requestFullscreen){
            video.requestFullscreen();
        }
        if(video.mozrequestFullscreen){
            video.mozrequestFullscreen();
        }
        if(video.msrequestFullscreen){
            video.msrequestFullscreen();
        }
    };
    video.oncanplaythrough=function(){
        console.log(this.duration);
        alltime=this.duration;
        alltimer.innerHTML=backtime(alltime);
        jingcolor.style.width=100+"px";
        jingdian.style.left=100-7.5+"px"
    }
    video.ontimeupdate=function(){
        var a=this.currentTime/this.duration*(500-7.5);
        color.style.width=a+"px";
        dian.style.left=a+"px";
        current.innerHTML=backtime(this.currentTime);
        //console.log(this.currentTime);
    };
    jingyin.onclick=function(){

        video.muted=!video.muted;

        if(video.muted){
            //console.log(temp);
            jingcolor.style.width=0+"px";
            jingdian.style.left=0+"px";
        }
        else{
            var c=video.volume*(100-7.5);
            jingcolor.style.width=c+"px";
            jingdian.style.left=c+"px";

        }
    };
    jingdian.onmousedown=function()
    {
        var that=this;
        document.body.onmousemove=function(e){
            var x= e.clientX-(par.offsetLeft+jingproess.offsetLeft)-7.5;
            that.style.left=x<0?0:x>100-7.5?100-7.5:x+"px";
            jingcolor.style.width=x<0?0:x>100?100:x+"px";
            //video.currentTime=x/(100-7.5)*video.duration;
            video.volume=x/(100-7.5);

        }
    };
    dian.onmousedown=function(){
        var that=this;
        document.body.onmousemove=function(e){

            var x= e.clientX-(par.offsetLeft+proess.offsetLeft)-7.5;
            that.style.left=x<0?0:x>500-7.5?500-7.5:x+"px";
            color.style.width=x<0?0:x>500?500:x+"px";
            video.currentTime=x/(500-7.5)*video.duration;
        }
    };
        document.body.onmouseup=function(){
            this.onmousemove=null;
    }
    forward.onclick=function(){
        video.playbackRate=5;
        start.innerHTML="开始";
    }
    back.onclick=function(){
        start.innerHTML="开始";
        video.pause();
       time=setInterval(function(){
           var count=video.currentTime;
           count-=5;
           if(count<0){
               count=0
           }
           video.currentTime=count;
       },1000)

    }
    function backtime(t){
        var min=parseInt(t/60);
        var s=Math.ceil(t%60);
        min=min<10?"0"+min:min;
        s=s<10?"0"+s:s;
       // console.log(min,s);
        return min+":"+s;
    }
</script>
</body>
</html>

canvas

将canvas转化成2d模型 getcontext
绘制矩形 fillRect(x,y,width,height)
绘制矩形边框 strokeRect(x,y,width,height)
填充样式 fillstyle() （必须在绘制矩形之前）
填充 fill()
绘制矩形的例子

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas">

</canvas>
<script>
    var canvas=document.querySelector("canvas");
    canvas.width=800;
    canvas.height=800;
    var cavs=canvas.getContext("2d");
       cavs.fillStyle="red";
       cavs.fillRect(0,0,300,300);
       cavs.fill();
</script>
</body>
</html>

绘制圆 arc(x,y,radius,startAngle，endAnger,anticlockwise)
画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:

弧度=(Math.PI/180)*角度。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas">

</canvas>
<script>
    var canvas=document.querySelector("canvas");
    canvas.width=800;
    canvas.height=800;
    var cavs=canvas.getContext("2d");
    cavs.fillStyle="green";
    cavs.arc(600,600,100,0,Math.PI/2,true);
    cavs.fill()
</script>
</body>
</html>

绘制线条 move To(x,y);line To(x,y)
填充线条颜色 stokeStyle=“red”;
填充线条：stoke();
设置线条宽度：linewidth；

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas">

</canvas>
<script>
    var canvas=document.querySelector("canvas");
    canvas.width=800;
    canvas.height=800;
    var cavs=canvas.getContext("2d");
    cavs.moveTo(400,400);
    cavs.lineTo(500,500);
    cavs.lineWidth=10
    cavs.strokeStyle="blue";
    cavs.stroke();
//用线条绘制一个五角星
cavs.strokeStyle="green";
    cavs.fillStyle="red";
    cavs.moveTo(300,300);
    cavs.lineTo(700,300);
    cavs.lineTo(340,600);
    cavs.lineTo(500,100);
    cavs.lineTo(660,600);
    cavs.lineTo(300,300);
    cavs.lineTo(700,300)
    cavs.lineWidth=8;
    cavs.stroke();
    cavs.fill();
</script>
</body>
</html>

圆形渐变creatPadialGradient(x1,y1,r1,x2,y2,r2)
createRadialGradient 方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
addColorstop()参数一：指颜色的过渡范围，最大值是1；参数二：颜色
beginpath();开始路径
closepath();关闭路径，前后不影响

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas">

</canvas>
<script>
    var canvas=document.querySelector("canvas");
    canvas.width=800;
    canvas.height=800;
    var cavs=canvas.getContext("2d");
//    var color=cavs.createRadialGradient(250,250,0,250,250,100);
//    color.addColorStop(0.2,"red");
//    color.addColorStop(0.4,"orange");
//    color.addColorStop(0.6,"yellow");
//    color.addColorStop(0.8,"green");
//    color.addColorStop(1,"blue");
//    cavs.fillStyle=color;
//    cavs.arc(250,250,100,0,Math.PI*2);
//    cavs.fill();
</script>
</body>
</html>

线性渐变：createLinearGradient(x,y,x1,y1);
x:渐变起始点横坐标
y：渐变起始点纵坐标
x1：渐变结束点横坐标
y1：渐变结束点纵坐标

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas">

</canvas>
<script>
    var canvas=document.querySelector("canvas");
    canvas.width=800;
    canvas.height=800;
    var cavs=canvas.getContext("2d");
//    var color=cavs.createLinearGradient(150,150,320,320);
//    color.addColorStop(0.2,"red");
//    color.addColorStop(0.4,"orange");
//    color.addColorStop(0.6,"yellow");
//    color.addColorStop(0.8,"green");
//    color.addColorStop(1,"blue");
//    cavs.fillStyle=color;
//    cavs.arc(250,250,100,0,Math.PI*2);
//    cavs.fill();
</script>
</body>
</html>

绘制文本：fillText(text,x,y[,maxwidth]);
text:用来填充文本信息；
x：填充文本的起点坐标；
y：填充文本的起点纵坐标；
maxwidth（可选）：填充文本的最大宽度，当文本占据宽度超过此最大宽度时，通过压缩每个文本的宽度进行适合，而非换行；
设置字体大小：font

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas">

</canvas>
<script>
    var canvas=document.querySelector("canvas");
    canvas.width=800;
    canvas.height=800;
    var cavs=canvas.getContext("2d");

//    var color=cavs.createLinearGradient(0,0,0,100);
//    color.addColorStop(0.2,"red");
//    color.addColorStop(0.4,"orange");
//    color.addColorStop(0.6,"yellow");
//    color.addColorStop(0.8,"green");
//    color.addColorStop(1,"blue");
//    cavs.fillStyle=color;
//    cavs.font="100px STheiti, SimHei";
//    cavs.fillText("哈哈哈哈",0,100);
//    cavs.fill();
</script>
</body>
</html>

绘制图片 drawImage(image,x,y)
其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas">

</canvas>
<script>
    var canvas=document.querySelector("canvas");
    canvas.width=800;
    canvas.height=800;
    var cavs=canvas.getContext("2d");

    var img=new Image();// 创建一个![在这里插入图片描述]()元素

    img.src="./img/1.jpg";// 设置图片源地址
    cavs.drawImage(img,30,30,100,100,200,100,200,100);
   
</script>
</body>
</html>

清楚区域 clearRect(x,y,width,height)类似橡皮擦

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas">

</canvas>
<script>
    var canvas=document.querySelector("canvas");
    canvas.width=800;
    canvas.height=800;
    var cavs=canvas.getContext("2d");
//    cavs.fillStyle="red";
//    cavs.fillRect(0,0,300,300);
//    cavs.fill();
//    cavs.clearRect(100,100,100,100);
</script>
</body>
</html>

缓存

localStorage 本地缓存缓存内存
sessionStorage 浏览器缓存关闭浏览器之后消失

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
   
  
     //写入缓存
     //存值  setItem  key  value
    sessionStorage.setItem("name", "小新");
    
     //读取缓存 getItem()  key
    console.log(sessionStorage.getItem("name"));

     //清除缓存  全部
    /*sessionStorage.clear();*/
    
     // 移除缓存
    sessionStorage.removeItem("name");

     // 根据索引取对应的键值
    console.log(sessionStorage.key(0));

</script>
</body>
</html>

cookie

cookie存值
cookie优点有有效期设置当前页面的访问权限
cookie 存的太少 2kb

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
  
    // 设置cookie有效期  expires
    // 设置访问路径path
    document.cookie="user=xiaoxin;expires=Thu, 18 Dec 2043 12:00:00 GMT;path=/";	
 //读取cookie
    var cookie = document.cookie;
   //修改cookie  直接给相同的键上赋值  (除了要修改得知其他的值与修改前全都相同)
  document.cookie="user=tom;expires=Thu, 18 Dec 2043 12:00:00 GMT;path=/";
  //删除是直接将键上的值清空
    document.cookie = "userinfo=; expires=Thu, 18 Dec 2043 12:00:00 GMT;path=/";
</script>
</body>
</html>