Html中如何自定义Video显示的长宽比

Html中如何自定义Video视频流显示的长宽比

首先，这个问题是之前课题组有需要控制显示视频流的长宽比，更严格者需要针对双目摄像头裁切一半视频显示在网页上，期间找了很多的网上的解决办法，发现都没有人做过，大部分解决思路利用Video标签的style属性来修改宽和高，可是这根本无法解决问题，最后借鉴于Canvas标签可以画图的功能，可以通过将视频流显示在画布上，逐帧显示，通过控制画布的长宽比即可自定义视频流的长宽比，话不多说就看如下如何操作。

video标签

具体Video标签的功能就不做过多介绍啦，就是可以使用Video标签在html网页上播放视频流。如下是Video标签的属性：

从图中，我们可以发现Video标签是有width和height属性，网上大部分回答是我们可以通过改变width和height标签的属性来达到我们希冀显示视频流的长宽比，可是经过多次试验发现，改变width和height属性确实能改变视频流的长宽比，可是它改变的前提是长宽比例需要遵循视频分辨率的长宽比例；这与我课题需求不符合，所以该方案只能pass掉。

canvas标签

canvas标签用于绘制图像和图片，canvas 是 HTML5 提供的一个用于展示绘图效果的标签. canvas 原意画布, 帆布. 在 HTML 页面中用于展示绘图效果. 最早 canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现.
至少从我浅显的理解中，canvas可以绘图，绘制基本图形，甚至可以截取视频的流的当前帧图片，那么解决办法就一目了然了，因为canvas本身只是一个容器是无法播放的，它只是截取视频流的当前帧，那么每隔20毫秒截取视频流，并绘制在画布上，就可以实现视频流的播放效果，同时可以自定义视频长宽比例。

使用方法

首先设定canvas的style中的width和height属性，设置成我们需要显示视频流的长宽比。
其次我们主要利用drawImage()方法，canvas中是通过这一方法往画布上绘制视频和图像。


如果不需要裁切一半的图像的话就可以使用语法2，需要裁切一半的话可以使用语法3，具体各个变量的定义，可以在网上查询drawImage()这个函数。

最后强调的是，请注意请注意请注意，画布上展示的视频中只是一个视频帧截图，可以理解为图片，所以要达到连续播放成视频流的同学们，需要设定每隔多久比如20毫秒抓取图片，从而形成视频播放。具体代码如下：

video.style.display = "none";
	 canvas3.style.display = "block";
	 video.addEventListener('play', function() {
         var i = window.setInterval(function() {
        	 context3.drawImage(video,0,0,1280,720,0,0,896,504);
             //当视频结束的时候去掉循环
             if(video.ended){
                clearInterval(i)
            }
         }, 20);
     }, false);

在以上代码中，我是选取了每20毫秒抓取一次图片，达到连续播放的效果。

试验结果

1.第一张图片，展示为没有丝毫截切视频流的效果，途中我们将canvas的width设为896，height设为504，视频摄像头为双目摄像头，视频分辨率为2560x720，如下是图片效果：

图中，因为没有裁切任何视频流全部选取，所以可以看到为双摄像头显示，可是其原本分辨率为2560x720，却如图中896x504长宽比例显示，虽然不太协调，这也证明，我们可以通过此方法自定义显示视频流的长宽比例

2.第二张图片，展示截切视频流的效果，途中我们将canvas的width设为896，height设为504，视频摄像头为双目摄像头，视频分辨率为2560x720，如下是图片效果：

在图二中，视频分辨率还是2560x720，canvas的长宽比为896x504，我们可以看到视频中没有双摄像头显示的效果，这是因为我们在drawImage中裁切了视频流，左边那一半显示，可以看出显示效果不错

结语

这篇文章也算是对最近解决问题的一个小总结，需要对那些需要在网页中自定义显示视频长宽比和需要裁切视频流显示的同学，也能够给与帮助。