笔记十八（视频）

最新推荐文章于 2024-06-26 21:16:42 发布

草木黄尘

最新推荐文章于 2024-06-26 21:16:42 发布

阅读量244

点赞数

分类专栏：前端动画基础学习笔记文章标签：绘图

本文链接：https://blog.csdn.net/qq_24849765/article/details/50204153

版权

前端动画基础学习笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

文件中载入一段视频并将其逐帧渲染到canvas元素上。
文件名：video.html。

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title>视频</title>
<style>
#canvas{background-color: #99cc33;}
#video{display: none;}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="500"></canvas>
<video id="video" width="600" autoplay>
    <source src="resource/成龙 - 醉拳.mkv"/>
    <p>该浏览器不支持该视频</p>
</video>
<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById('canvas'),
            context = canvas.getContext("2d"),
            video = document.getElementById("video");
        if (!window.requestAnimationFrame) {
            window.requestAnimationFrame = (window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){
                return window.setTimeout(callback,1000/60);
            })
        };
        (function drawFrame(){
            window.requestAnimationFrame(drawFrame,canvas);
            context.drawImage(video,0,0);
        }());
    }
</script>
</body>
</html>

效果图：

参见《HTML5+Javascript动画基础》。

草木黄尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笔记十八（视频）

文件中载入一段视频并将其逐帧渲染到canvas元素上。文件名：video.html。<!DOCTYPE html><html><head> <meta charset = "utf-8"> <title>视频</title><style>#canvas{background-color: #99cc33;}#video{display: none;}</style>
复制链接

扫一扫

专栏目录