锐客网

  1. 首页 > it技术 > >

同层播放器

1. 标签里的内联播放相关属性
微信在video标签上新增了一些x5的私有属性，分别是：
x5-video-player-type
启用同层播放。取值固定为'h5'。
x5-video-player-fullscreen
是否全屏。取值为'true'或'false'。
x5-video-orientation
视频方向。取值分别为'landscape'、'portrait'或者'landscape|portrait'，分别对应横屏、竖屏及自动旋转（这个应该用的少）。
不过有一点需要注意的是，这些都是x5的私有属性，仅适用于Android平台。而跟iOS平台相关的，则是这几个属性：
airplay
x-webkit-airplay
playsinline
webkit-playsinline
其中最后两个是iOS平台下的内联播放属性，都是布尔属性，不需要赋值（存在即是true）；前两个是iOS平台下airplay的相关属性（说实话我现在也没搞明白为什么网页需要airplay属性），取值为'allow'或'deny'，通常保险起见用'allow'就可以。
2. CSS的属性选择及取值
微信在同层接入规范中提到了object-position这个属性，用于设置视频出现的位置。实际在尝试的过程中，搭配object-fit属性同时使用的效果会比较好。但这两个属性并不是x5私有属性，而是原生的，所以它们同时适用于Android和iOS两个平台。
object-position和object-fit这两个元素主要的作用是为“可替换元素”设置位置和大小。这里的“可替换元素”，指的是内容不受CSS显式控制的元素，比如比较典型的就是、、和表单元素等。3. 视频封面4. 初始化设置视频视口
need-to-insert-img
?
code
1
【同层播放器】2
3
4
5
$('video')
.attr({
'width': window.innerWidth + 'px',
'height': window.innerHeight + 'px'
});
5. UA特性探测
这些内容可能对你也有帮助
Android实现简单音乐播放器(MediaPlayer)
使用VUEJS2.0制作音乐播放器
android 播放器的初探
Android之万能播放器解码框架Vitamio的介绍及使用
Vue2.0音乐播放器
【项目整理】心灵驿站音乐播放器类iOS端app
小米盒子高清播放器 小米5s能播放高清视频和电影吗
基于vue-cli 构建 使用全家桶实现 音乐播放器 等
更带感的vue歌词播放器vue-lrc-player
PS怎么创建音频播放器界面
TAGS: 播放器神经病
上一篇:JavaScript 中 闭包 的详解
下一篇:nodejs-local-api

猜您也会喜欢这些文章
jQuery纵向导航菜单效果实现方法
jQuery Ajax使用用法详解
js点击enter回车键实现表单元素切换焦点效
前后台交互
videojs--跨浏览器的HTML视频播放器（可自定
npm包与gem包
JavaScript学习总结(二) 闭包、IIFE、apply
JS:window.onload的使用
Web前端开发之水印、图片验证码
javascript_basic_01
最近更新
1javascript自定义事件原理


2一个Vue+Canvas的酷炫后台管理


3vue源码学习之简单的数据监听


4nodejs-local-api


5WebAssembly 为什么比 asm.js 快？


6神经病啊！——微信同层播放器接(踩)入(坑)总结
7面试整理----javascript


8React 动态渲染图片，提升用户体验


9JavaScript 中 闭包 的详解


10JavaScript this关键字
热门排行
1如何安装和配置 AngularJS Eclipse


2summernote编辑器插件使用笔记


3Redux之Action Creator / bindActionCreators：动态去生成Action
4从零组装新工具 - Koa2


5Vue_VueValidator


6Vue.js——使用$.ajax和vue


7基于AngularJs的上传控件－angular-file-upload的使用实例
8解决Angular2 (SystemJS) XHR error (404 Not Found) loading traceur
9javascript中的正则表达式


10吐槽一下vue-loader
推荐内容
1WebAssembly 为什么比 asm.js 快？


2神经病啊！——微信同层播放器接(踩)入(坑)总结
3JavaScript 中 闭包 的详解


4JavaScript 中 apply 、call 的详解


510道典型的JavaScript面试题


6javascript . 03 函数定义、函数参数（形参、实参）、函数的返回值、冒泡函数、函数的加载、局部变量与全局变量、隐式全局变量、JS预解析、是否是质数、斐波那契数列
7京东数据接口调用


8JavaScript try
9蝼蚁的觅食之路 之 冒泡排序


10gulp基础教程
首页
关于我们
联系方式
广告合作
网站帮助
网站地图
? 2009-2020 www.zhimengzhe.com 织梦者. 站长统计
本站所有教程文章与下载资源版权均归原作者所有．如有侵权请与站长联系,本站将及时删除．站长邮箱:895674471#QQ.com(将#改为@).　谢谢合作!
更多Javascript教程可查看Javascript教程列表页。
以上就是对神经病啊！——微信同层播放器接(踩)入(坑)总结的相关介绍，希望对您学习javascript有所帮助，感谢您关注织梦者!
Apple Developer - Opting Into or Out of AirPlay
Apple Developer - plays?Inline
Apple Developer - HTMLMedia?Element
Apple Developer - HTMLVideo?Element
MDN - 可替换元素
MDN - 媒体相关事件
MDN - object-position
MDN - object-fit
半深入理解CSS3 object-position/object-fit属性
HTML5中的视频音频使用详解
H5微信播放全屏问题
关于如何在微信里面让video不全屏播放
视频H5のVideo标签在微信里的坑和技巧
微信 ·《H5同层播放器接入规范_20170117》
参考资料：
在QQ浏览器Android版本中,当浏览器版本>=7.1时开始支持
UA示例：User-Agent: Mozilla/5.0 (Linux? U? Android 4.4.4? zh-cn? OPPO R7
Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0
Chrome/37.0.0.0 MQQBrowser/7.1 Mobile Safari/537.36
在微信等TBS里通过UA判断X5内核版本来区分,当版版本号>036849表示支持
UA示例:
Mozilla/5.0 (Linux? Android 4.4.4? OPPO R7 Build/KTU84P) AppleWebKit/537.36
(KHTML, like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.8
TBS/036849 Safari/537.36 MicroMessenger/6.3.27.861 NetType/WIFI
Language/zh_CN
同层接入规范里给的，判断是否是同层播放器方法：
就可以了。
同层接入规范里推荐的是设置video标签css的宽高，但我一般还是习惯直接设置标签的width和height，所以在ready回调里加个：
标签里有一个与视频封面相关的属性poster，但是在使用中发现性能存在一些问题，在Android端打开视频时（加载），会有跳动的感觉，但是如果去掉，在视频加载时（preload取值'auto'，且未用预加载）则会显示空白页面。目前换用了背景图片的方式，但由于视频全屏播放时顶部会有空隙，所以额外加了个background-position: bottom; 以及background-size: contain; （取值和视频保持一致），这样设置好的背景在播放视频时就不会漏边了。
另一个属性object-fit，有点类似background-size属性，用来设置视频在容器内的填充方式，平时用只需要取值'contain'（保持宽高比填满容器）就可以了。不过这里需要留意的是，全屏下，由于视频一般都不会正好填满屏幕（宽高比差异以及输出分辨率没算顶部标题栏），会在顶部留下一条空隙。这条空隙通常是默认黑色的，如果需要更改颜色，首先要加上个'display:block; '（因为video默认是inline的），然后直接改background-color就OK~
说回视频播放。微信官方的同层接入规范中推荐的做法，是用js动态计算需要的像素值，然后给object-position属性赋值。而我自己尝试了一圈下来，发现object-position这个属性本身支持百分比取值，通常视频默认的值是'50% 50%'，也就是居中；全屏视频一般情况下需要贴底放，所以要把取值改成'0 100%'。

    推荐阅读


    上一篇：互联网创业者，学会这招，能够大大的提高自己生意的转化

    下一篇：滔滔黄河水