在使用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参考：
因此解决这样的问题，我们需要先设置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中一样将资源路径配置为真实路径即可。
网友评论