这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了 layer 弹出层中 H5 播放器全屏出错解决 & 属性 poster 底图占满 video 的方法,具有很好的参考价值,下面跟着小编一起来看下吧
1.
在 layer 弹窗组件中
如果使用了 flash 播放器,全屏是正常的
但若使用了 html5 的播放器,全屏失效
举个栗子
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js">
- </script>
- <script src="layer/layer.js">
- </script>
- <style>
- </style>
- </head>
- <body>
- <h1>
- 我是字
- </h1>
- <div id="box">
- <video id="video" controls preload="auto" width="400px" height="300px">
- <source src="http://movie.ks.js.cn/flv/other/1_0.mp4" type="video/mp4">
- </video>
- </div>
- <script>
- layer.open({
- type: 1,
- title: false,
- shadeClose: true,
- area: ['400px', '350px'],
- content: $('#box'),
- success: function(layero) {}
- });
- </script>
- </body>
- </html>
可以看到全屏不正常了
通过调试发现是这个 class 的处理影响了全屏的展示
所以,目前的解决办法是在 layer 层创建之后,移除这个 class 即可(注意在 success 回调中置于下一轮事件循环)
- layer.open({
- type: 1,
- title: false,
- shadeClose: true,
- area: ['400px', '350px'],
- content: $('#box'),
- success: function(layero) {
- console.log(layero)
- // hack处理layer层中video播放器全屏样式错乱问题
- setTimeout(function() {
- // $(layero).removeClass('layer-anim');
- },
- 0);
- }
- });
2.
video 标签的 poster 属性指代视频未播放前放置的一张图片
如果 video 容器宽高小于等于 poster 图的宽高,则图片能充满容器,反之容器左右就会预留黑色栏
除了手动更换一张大图之外,可以结合 CSS 来控制,实现铺满
举个栗子
- <div id="box">
- <video id="video" controls preload="auto" width="700" height="300" poster="../poster.png">
- <source src="http://movie.ks.js.cn/flv/other/1_0.mp4" type="video/mp4">
- </video>
- </div>
现在图片宽度比容器小,没铺满,参考这里的讨论 可以用 CSS 让其撑开(这里相当于放大了,不想放大需自行更换大图)
poster 里放一个透明图片(这里使用了一个 1px*1px 的 base64 格式透明图片),再用 css 定义 video 的 background 并将其覆盖住
- <div id="box">
- <video id="video" controls preload="auto" width="700" height="300" poster="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==">
- <source src="http://movie.ks.js.cn/flv/other/1_0.mp4" type="video/mp4">
- </video>
- </div>
- video {
- background: transparent url('../poster.png') no - repeat 0 0; - webkit - background - size: cover; - moz - background - size: cover; - o - background - size: cover;
- background - size: cover;
- }
来源: http://www.phperz.com/article/17/0722/327413.html