html

<video style="position: relative;  object-fit: fill;"  preload="auto" id="video1" playsinline="" x-webkit-airplay="" webkit-playsinline="" x5-video-player-type="h5"  src="video/H5.mp4"></video>
<canvas id="myCanvas" width="200" height="200"></canvas>

css

canvas{width: 100%;height: 100%;}
video{display: none}

js

var timer=null;
var video=document.getElementById('video1');
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
canvas.width = window.innerWidth*2; //获取屏幕宽度作为canvas的宽度 这个设置的越大,画面越清晰(相当于绘制的图像大,然后被css缩小)
canvas.height = window.innerHeight*2;
function draw1() {
video.play();
timer = setInterval(function(){
if(video.currentTime >=3.8){ //视频时间在3.8s时停止
video.pause();
clearInterval(timer);
};
context.drawImage(video, 0, 0, canvas.width, canvas.height);//绘制视频
},16);
};
draw1()
 
 

canvas绘制video的更多相关文章

  1. canvas绘制视频封面--摘抄

    一.需求:上传视频,同时截取视频某一帧作为视频的封面. 二.实现思路:利用canvas绘制图像的功能,绘制图像某一帧,这里绘制了第一帧,很简单就实现了. 三.代码: <!DOCTYPE html ...

  2. canvas绘制图片drawImage学习

    不得不说,html5中的canvas真的非常强大,从图片处理,到视频处理,再到游戏开发,都能见到canvas的身影,然而,就这一个<canvas>标签,功能居然如此强大,这主要归功于can ...

  3. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  4. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 封装 用canvas绘制直线的函数--面向对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 学习笔记:HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  7. canvas绘制经典折线图(一)

    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

  8. Canvas绘制图形

    1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  9. [canvas]利用canvas绘制自适应的折线图

    前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...

随机推荐

  1. 服务器访问数据库表mysql

    服务器的MySQL配置就不说了,直接说一些用到的基础命令 登陆 show databases; use 数据库: show tables; 执行sql即可: 一定要有分号 select * from ...

  2. idea设置编码格式utf-8

    settings  >> File Encodings >>如下

  3. 人脸识别的LOSS(上)

    超多分类的Softmax 2014年CVPR两篇超多分类的人脸识别论文:DeepFace和DeepID Taigman Y, Yang M, Ranzato M A, et al. Deepface: ...

  4. Leetcode166. Fraction to Recurring Decimal分数到小数

    给定两个整数,分别表示分数的分子 numerator 和分母 denominator,以字符串形式返回小数. 如果小数部分为循环小数,则将循环的部分括在括号内. 示例 1: 输入: numerator ...

  5. LR回放webservice脚本报错------------mmdrv.exe应用程序错误(未解决)

    1.录制完成webservice脚本如下: 2.回放脚本,报错: 3.网上查看了一些解决办法,但都是没有起到作用.

  6. leetcode-123-买卖股票的最佳时机③

    题目描述: 方法一: class Solution: def maxProfit(self, prices: List[int]) -> int: dp_i1_0 = 0 dp_i1_1 = f ...

  7. CycloneII lcell_comb 和 lcell_FF 的结构

    1,lcell_comb结构 2,lcell_FF结构 from : cycloneii_eda_fd.pdf

  8. 0818NOIP模拟测试赛后总结

    又挂了…… 120 rank19. 第一次两个机房考不同的题目.一开始并不知道应该做哪套题目. 不明真相的吃瓜群众决定先点开B套.通读三道题,只是觉得T2好水.似乎是红题难度吧……(后来证明是我读错题 ...

  9. Zuul的容错与回退与Zuul的高可用

    容错与回退 复制zuul项目,修改ArtifactId 如zuul-falllback 写Zuul的回退类 @Component public  class ZuulFallBackProvider ...

  10. 19-10-30-C

    交文件吼啊. ZJ一下: T1是真·高中数学. T2不是很清楚,只得了30. T3打了一个欧拉序. 做的海星的地方: Vim太好用辣,直接按平常打叫上去它就是 freopen T1仔仔细细的研究了高考 ...