一.简介

直到现在，仍然不存在一项旨在网页上显示视频的标准。

今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。如：

1
2
<video src="movie.ogg" controls="controls">
</video>

二.Canvas+Video

HTML5中引入新的元素canvas，其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。

drawImage函数有三种函数原型：

drawImage(image, dx, dy) 
drawImage(image, dx, dy, dw, dh) 
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

第一个参数image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作为参数。

dx和dy是image在canvas中定位的坐标值；dw和dh是image在canvas中即将绘制区域（相对dx和dy坐标的偏移量）的宽度和高度值；

sx和sy是image所要绘制的起始位置，sw和sh是image所要绘制区域（相对image的sx和sy坐标的偏移量）的宽度和高度值。

所以这使酷炫播放体验有了实现的可能。

三.理解canvas.translate和canvas.scale

很多人对于canvas.translate(x,y)的理解有的错误，之前一直以原点（0,0）为基准点，作用就是移动原点，默认的原点（0，0）是在屏幕左上角的，你可以通过translate（x，y）把点（x，y）作为原点，就一直以为这个(x,y)就是新的坐标原点。但看一下API就会知道，这种理解是不对的，

不过API确实容易误导大家：

1
2
3
4
5
6
7
view plain
public void translate (float dx, float dy) 
 Since: API Level 1 
Preconcat the current matrix with the specified translation 
Parameters 
dx  The distance to translate in X 
dy  The distance to translate in Y

其实是原来的原点分别在x轴和y轴偏移多远的距离，然后以偏移后的位置作为坐标原点。也就是说原来在（100,100）,然后translate（1，1）新的坐标原点在（101,101）而不是（1,1）

canvas.scale：

canvas.scale提供了放大缩小倒置等功能。比如Y倒置：canvas.scale（1，-1）

四.核心代码

1
2
3
4
5
6
7
canvas.setAttribute('height', Math.floor(video.height));
      canvas.setAttribute('width', Math.floor(video.width));
 
      ctx.translate(0, canvas.height );
      ctx.scale(1, -1);
      ctx.globalAlpha = 0.3;
      ctx.drawImage(video, 0, 0, video.width, video.height, 0, -canvas.height/2, canvas.width, canvas.height);

五.在线演示

 
 00:00 /

六.代码下载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<html >
<head>
<meta charset="utf-8" />
<title></title>
 
</head>
<body>
   <div>
   <video  width="640" height="264">
  </video> <br/>
  <canvas style="position:absolute; top:143px;"></canvas>
</div>
<div  style="position:absolute; top:400px;">
  <p>
    <input type="button" id="play" value="play">
    <span id="position">00:00</span> / <span id="duration"></span>
  </p>
  </div>
<script >
 
    var addEvent = (function () {
        if (document.addEventListener) {
            return function (el, type, fn) {
                if (el && el.nodeName || el === window) {
                    el.addEventListener(type, fn, false);
                } else if (el && el.length) {
                    for (var i = 0; i < el.length; i++) {
                        addEvent(el[i], type, fn);
                    }
                }
            };
        } else {
            return function (el, type, fn) {
                if (el && el.nodeName || el === window) {
                    el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
                } else if (el && el.length) {
                    for (var i = 0; i < el.length; i++) {
                        addEvent(el[i], type, fn);
                    }
                }
            };
        }
    })();
    
</script>
<script>
    var video = document.querySelector('video');
    var togglePlay = document.querySelector('#play');
    var position = document.querySelector('#position');
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');
 
    addEvent(togglePlay, 'click', function () {
        video.playbackRate = 0.5;
        if (video.paused) {
            if (video.ended) video.currentTime = 0;
            video.play();
            this.value = "pause";
        } else {
            video.pause();
            this.value = "play";
        }
    });
 
    setInterval(function () {
        position.innerHTML = asTime(video.currentTime);
        ctx.drawImage(video, 0, 0, video.width, video.height, 0, -canvas.height / 2, canvas.width, canvas.height);
    }, 1000 / 15);
 
    addEvent(video, 'ended', function () {
        togglePlay.value = "play";
    });
 
    addEvent(video, 'canplay', function () {
        video.muted = true;
        document.querySelector('#duration').innerHTML = asTime(this.duration);
        startCanvas();
    });
 
 
    function startCanvas() {
        canvas.setAttribute('height', Math.floor(video.height));
        canvas.setAttribute('width', Math.floor(video.width));
 
        ctx.translate(0, canvas.height );
        ctx.scale(1, -1);
        ctx.globalAlpha = 0.3;
        ctx.drawImage(video, 0, 0, video.width, video.height, 0, -canvas.height/2, canvas.width, canvas.height);
 
       
    }
 
    function asTime(t) {
        t = Math.round(t);
        var s = t % 60;
        var m = Math.round(t / 60);
 
        return two(m) + ':' + two(s);
    }
 
    function two(s) {
        s += "";
        if (s.length < 2) s = "0" + s;
        return s;
    }
</script>
</body>
 
</html>

Canvas+Video打造酷炫播放体验的更多相关文章

  1. 使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种滑动冲突

    使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种冲突 如果你还在为处理滑动冲突而发愁,那么你需要静 ...

  2. HTML5 Canvas玩转酷炫大波浪进度图

    如上图所见,本文就是要实现上面那种效果. 由于最近AlloyTouch要写一个下拉刷新的酷炫loading效果.所以首选大波浪进度图. 首先要封装一下大波浪图片进度组件.基本的原理是利用Canvas绘 ...

  3. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  4. MVC中使用SignalR打造酷炫实用的即时通讯功能附源码

    前言,现在这世道写篇帖子没个前言真不好意思发出来.本贴的主要内容来自于本人在之前项目中所开发的一个小功能,用于OA中的即时通讯.由于当时走的太急,忘记把代码拿出来.想想这已经是大半年前的事情了,时间过 ...

  5. MVC中使用SignalR打造酷炫实用的即时通讯功能(轉載)

    資料來源:http://www.fangsi.net/1144.html 前言,现在这世道写篇帖子没个前言真不好意思发出来.本贴的主要内容来自于本人在之前项目中所开发的一个小功能,用于OA中的即时通讯 ...

  6. 学习websocket-SignalR，MVC中使用SignalR打造酷炫实用的即时通讯

    http://www.cnblogs.com/Leo_wl/p/4793284.html http://www.fangsi.net/archives/1144.html

  7. Android 使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种滑动冲突

    如果你还在为处理滑动冲突而发愁,那么你需要静下心来看看这边文章,如果你能彻底理解这篇文章中使用的技术,那么,一切滑动冲突的问题解决起来就轻而易举了: 先扔一个最终实现的效果图 先分析下效果图中实现的功 ...

  8. [刘阳Java]_酷炫视频播放器制作_界面篇

    今天开始分享一篇酷炫播放器制作,包括界面+JS.整个案例非常类似腾讯视频,优酷视频,爱奇艺视频.我们先看一下效果图,然后这篇文章主要界面篇 是不是效果比较酷炫,那么我接着来给大家说一下这个界面设计思路 ...

  9. 2019基于Hexo快速搭建个人博客，打造一个炫酷博客(1)-奥怪的小栈

    本文转载于:奥怪的小栈 这篇文章告诉你如何在2019快速上手搭建一个像我一样的博客:基于HEXO+Github搭建.并完成SEO优化,打造一个炫酷博客. 本站基于HEXO+Github搭建.所以你需要 ...

随机推荐

  1. VMware Workstation 12 Pro 之安装林耐斯优麒麟 X64系统

    VMware Workstation 12 Pro 之安装林耐斯优麒麟 X64系统... --------------------- 先去官网下载ISO格式的系统安装包:http://www.ubun ...

  2. ssh环境的搭建，基于注解和配置文件使用

    搭建spring.Struts2.hibernate三大框架的环境 这里分两部分来讲:一.用myeclipse 2014 快速搭建环境,非常快捷, 大部分配置文件信息系统都帮我们写好,建议老手使用 二 ...

  3. multisim&proteus&protel比较

    Multisim有超强板级的模拟/数字电路板的设计工作.它包含了电路原理图的图形输入.电路硬件描述语言输入方式,具有丰富的仿真分析能力.高版本可 以进行单片机等MCU的仿真.Multisim有实际元器 ...

  4. 一篇文章读懂Java类加载器

    Java类加载器算是一个老生常谈的问题,大多Java工程师也都对其中的知识点倒背如流,最近在看源码的时候发现有一些细节的地方理解还是比较模糊,正好写一篇文章梳理一下. 关于Java类加载器的知识,网上 ...

  5. Groovy Script in SoapUI REST Testing

    1. Run special step: testRunner.runTestStepByName("stepName/requestName") get it's respons ...

  6. python条件判断与循环

    条件判断 1.python缩进规则: 如果if语句判断是True,就把缩进的语句执行了,否则,什么也不做,比如: age=20 if age >= 18: print('your age is' ...

  7. split添加limit参数

    String str = "I love you"; /**这里被分割为I 和love you**/ String[] spiltStr = str.spit(" &qu ...

  8. 零基础如何一步一步开始搭建高性能直播平台？现以GitChat·架构来进行说明

    前言 现在直播已经成为移动互联网时代一个新的重要流量入口,从YY.斗鱼到花椒直播,直播已经成为人们分享交流的新方式,应用场景众多,主要分为: 金融类直播:金融直播可应用于实时解盘,在线专家讲座,专家在 ...

  9. MIT6.828课程JOS在macOS下的环境配置

    本文将介绍如何在macOS下配置MIT6.828 JOS实验的环境. 写JOS之前,在网上搜寻JOS的开发环境,很多博客和文章都提到"不是32位linux就不好配置,会浪费大量时间在配置环境 ...

  10. Java 循环和函数（方法）

    1 for循环嵌套 简而言之,就是一个for循环语句里面,还有一个for循环语句. 外层循环,每循环一次,内层循环,循环一周. 示例 package java003; /** * 2017/9/1. ...