canvas 在视频中的用法

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>model</title>
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <style>
        *{margin:0;}
    </style>
</head>
<body>
    <div>
        <canvas id="mycanvas" width="640" height="1039"></canvas>
    </div>

    <video class="" id="video" width="640" autoplay style=" display:none;">
        <source src="images/video.mp4" type=‘video/mp4‘>
    </video>
<script type="text/javascript" src="js/setviewport.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
    function playVideo() {
        var myvideo=document.getElementById("video");

        var c=document.getElementById(‘mycanvas‘);
        var ctx=c.getContext("2d");

        ctx.clearRect(0,0,640,1039);
        ctx.drawImage(myvideo,0,0,640,1039);

        stopCanvas = setInterval(function () {
            ctx.clearRect(0,0,640,1039);
            ctx.drawImage(myvideo,0,0,640,1039);
        },30)
    }
    playVideo();
</script>

</body>
</html>
时间: 2024-10-27 03:30:59

canvas 在视频中的用法的相关文章

react中使用canvas播放视频

最近做个移动端视频需求,要求隐藏播放控件,并且可以自动播放而且隐藏播放控件(不太人性化),最后要有个定制的结束遮罩层用来人机交互.尝试直接用video标签做,但是各种坑啊,video永远是在页面的最顶层,所以播放控件的自定义化就凉凉了,怎么办呢?受以前做的一个利用canvas做视频直播的项目启发,尝试下canvas做视频播放,于是我抱着试一试的心态去查阅了相关资料,尼玛,还真的可以,而且原理很简单! 首先要解决在react中操作canvas的问题,众所周知,react和vue都是生成的虚拟dom

div+css中clear用法

原文:div+css中clear用法 一开始用clear属性,只是跟float相对使用,今天看视频的时候还是不大明白,查了下资料原来是这样的哦,看咯. clear属性值有四个clear:both|left|right|none; 作用:该属性的值指出了不允许有浮动对象的边. 这个属性是用来控制float属性在文档流的物理位置的. 当属性设置float(浮动)时,他所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被floa

用canvas给视频图片添加特效

Canvas制作视频图片特效 1. Canvas介绍 1.1Canvas是html5上的一个画布标签,功能有点类似java的swing.可以在canvas上画线条 弧线, 文字 就是画布的功能. 具体提供的js函数看http://www.w3school.com.cn/tags/html_ref_canvas.asp 2 简单介绍一下使用: Var canvas = document.documentElementById(“canvasId”); Var ctx = canvas.getCon

typename在C++中的用法

1. //在C++中typename一般用来声明模板的模板参数(template parameter): template<typename T> class X; //T是一个模板参数 2. /*但是还有一个关键的用法.首先是两个概念: 1). qualified name 例如:std::cout, std::endl;这样含有作用域符号(::)的就是限定名, 当我们用using声明将cout,endl引入到当前作用域之后就可以直接使用 这两个名称,这个时候cout,endl就不是限定名了

C#中MessageBox用法大全(转)

我们在程序中经常会用到MessageBox. MessageBox.Show()共有21中重载方法.现将其常见用法总结如下: 1.MessageBox.Show("Hello~~~~"); 最简单的,只显示提示信息. 2.MessageBox.Show("There are something wrong!","ERROR"); 可以给消息框加上标题. 3.if (MessageBox.Show("Delete this user?&q

【转】 从最简单的vector中sort用法到自定义比较函数comp后对结构体排序的sort算法

sort函数在使用中非常好用,也非常简单,而且效率与冒泡或者选择排序不是一个数量级.本文就sort函数在vector中的用法分为sort函数入门用法与自定义comp比较函数比较结构体这两个最基本的功能讲讲其用法: 1.sort入门: 使用sort需要包含algorithm头文件,完整代码如下 #include<iostream> #include<vector> #include<algorithm>//貌似可以不用,但最好加上. using namespace std

[转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法

一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBox.Show (IWin32Window, String) 在指定对象的前面显示具有指定文本的消息框. MessageBox.Show (String, String) 显示具有指定文本和标题的消息框.由 .NET Compact Framework 支持. MessageBox.Show (IWi

IOS中NSdate用法

// date方法返回的就是当前时间(now) 02. NSDate *date = [NSDate date]; 03.// now: 11:12:40 04.// date: 11:12:50 05. date = [NSDate dateWithTimeIntervalSinceNow:10];//返回当前时间10秒后的时间 06. // 从1970-1-1 00:00:00开始 07. date = [NSDate dateWithTimeIntervalSince1970:10];//

IOS中NSSarry用法

一.创建数组 // 创建一个空的数组 02.NSArray *array = [NSArray array]; 03.// 创建有1个元素的数组 04.array = [NSArray arrayWithObject:@"123"]; 05.// 创建有多个元素的数组 06.array = [NSArray arrayWithObjects:@"a", @"b", @"c", nil nil]; 07.NSArray *arr