使用HTML5 video的一些问题

在使用HTML5 video来进行网页视频播放遇到的一些问题，总结记录下。

1.在layer弹出层中使用video标签无法最大化全屏播放

layer弹出层是一个jQuery插件，提供了一系列的web弹框/层的解决方案 。

但是在layer中使用H5的video标签作为弹出层来播放视频，在谷歌中最大化的时候就会出现问题，无法全屏播放。原因是弹出层的“.layer-anim”class样式影响了元素尺寸的计算。

处理方法即在弹窗时清除layer层中的layer-anim样式属性：

layer.open({
     type: 2,
     title: false,
     shadeClose: true,
     area: ['500px', '550px'],
     content: url,
     success: function(layero){
     console.log(layero);
      //处理layer层中video播放器全屏样式问题
     setTimeout(function() {
             $(layero).removeClass('layer-anim');
         }, 0);
     }
 });

具体参考：鱼人码头的博客

2.layer捕获页，捕获页面上的video标签全屏播放异常

layer的捕活页是将页面上区域元素进行捕获，置于弹出层中探出的功能实现方式。具体代码如下：

//捕获页
layer.open({
  type: 1,
  shade: false,
  title: false, //不显示标题
  content: $('.layer_notice'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
  cancel: function(){
    layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
  }
});

当我们使用layer的捕获页获取页面上的video标签来实现一个窗口播放的功能，但是 当我们最大化video标签的时候，发现最大化后的video并不在layer弹框里面，也没有全屏播放，而是在原始页面上放大播放了。

解决方案和 1中一样，去除“.layer-anim”class样式即可。

3.video 进度条无法拖动

当我们在本地使用video进行网页播放视频的时候，视频的进度条是可以拖动的。然而为什么放在项目中，通过URL播放服务器上的视频资源时进度条却无法拖动了呢？ （audio有同样的问题)。

原因分析：

video有个自带的属性currentTime，来设置当前播放位置。进度条无法拖动大有可能是这个 currentTime属性没有获取的到 。为什么currentTime没有获取得到呢？原因在于我们服务器上的视频链接返回的Content-Type有问题。

因为我们video src属性http链接需要的Content-Type是 ：video/mpeg4

关于Content-Type参考：

• HTTP contentType 对照表
• 天空之城阿祥的博客

因此解决这样的问题，我们需要先设置URL

URL realUrl = new URL(url);
    // 打开和URL之间的连接
    URLConnection conn = realUrl.openConnection();
    // 设置文件类型:
    conn.setRequestProperty("Content-Type","video/mpeg4");

当然，我们可以考虑下为什么会出现URL的Content-Type不是mp4类型的呢？

是不是使用了Nginx，一般我们关于文件上传、预览、下载等的操作都会在一个单独放在一个服务上。如果使用了Nginx的话，URL发的Content-Type的类型就可能是“application/xxx”。

我们需要在Nginx中将资源路径配置成真实路径：

location /resource {
    proxy_pass http://localhost:8081/resource/;
}

关于Nginx参考： Nginx中文文档

4.视频加载缓慢

一般来说，使用video，除非网络原因不会出现视频加载缓慢的问题。若使用了Nginx导致。同3中一样将资源路径配置为真实路径即可。