html5的video自动播放视频（静音），canvas绘制视频案例代码

最新推荐文章于 2023-10-24 17:08:29 发布

程序媛zcx

最新推荐文章于 2023-10-24 17:08:29 发布

阅读量4k

点赞数

分类专栏： HTML 前端 JavaScript 文章标签： video canvas drawImage

本文链接：https://blog.csdn.net/qq_40015157/article/details/111208048

版权

JavaScript 同时被 3 个专栏收录

72 篇文章 9 订阅

订阅专栏

前端

37 篇文章 1 订阅

订阅专栏

HTML

23 篇文章 0 订阅

订阅专栏

一、HTML5 canvas drawImage() 方法

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 drawImage() 方法。

注释：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。

定义和用法

drawImage() 方法在画布上绘制图像、画布或视频。

drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。

JavaScript 语法 1

在画布上定位图像：

context.drawImage(img,x,y);

JavaScript 语法 2

在画布上定位图像，并规定图像的宽度和高度：

context.drawImage(img,x,y,width,height);

JavaScript 语法 3

剪切图像，并在画布上定位被剪切的部分：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数值

参数	描述
img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度。（伸展或缩小图像）
height	可选。要使用的图像的高度。（伸展或缩小图像）

二、绘制视频案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5-Video播放视频，canvas绘制视频</title>
</head>
<body>
<p>左侧为HTML5-video标签播放的视频，右侧为canvas绘制的视频</p>

<video id="myvideo" controls width="270" autoplay="autoplay" muted>
    <source src="m1.mp4" type='video/mp4'>
</video>

<canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
    var v = document.getElementById("myvideo");
    var c = document.getElementById("myCanvas");
    ctx = c.getContext('2d');
    // 每 20 毫秒，代码就会绘制视频的当前帧
    v.addEventListener('play', function () {//播放
        var i = window.setInterval(function () {
            ctx.drawImage(v, 0, 0, 270, 135);
        }, 20);
    }, false);
    v.addEventListener('pause', function () {//暂停
        window.clearInterval(i);
    }, false);
    v.addEventListener('ended', function () {//结束
        clearInterval(i);
    }, false);

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

谷歌浏览器效果图：

注意：要想视频自动播放需要加 autoplay="autoplay" 和 muted （但视频是静音的）

程序媛zcx

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
html5的video自动播放视频（静音），canvas绘制视频案例代码

一、HTML5 canvas drawImage() 方法浏览器支持Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 drawImage() 方法。注释：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。定义和用法drawImage() 方法在画布上绘制图像、画布或视频。drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。JavaScript
复制链接

扫一扫