video 在安卓版本上小窗口播放，IOS 微信 video小屏幕播放，微信全屏video

目录：

安卓和ios微信video小窗口播放（太水，可以直接跳过）
noscript标签
video移动端上面不得不说的辛酸

腾讯关于video的说明文档:https://x5.tencent.com/tbs/guide/video.html

一个video html标签包含以下几个常见的属性:

x-webkit-airplay="true" //支持Airplay的设备（如：音箱、Apple TV)播放
webkit-playsinline="" //支持嵌入html标签里面播放，ios支持比较好，安卓l浏览器无效(测试搜狗浏览器)没看到有效果，谷歌浏览器可以
playsinline="true"
x5-video-player-type="h5"
x5-video-orientation="portrait"
x5-video-player-fullscreen="false"

X5开头的是腾讯X5内核提供的，只对微信，QQ内置浏览器,QQ浏览器有效，使用这些属性会开启一个叫

“H5同层播放器”的东西，就是开启一个全屏，

如果不添加腾讯提供的X5开头的属性默认使用腾讯提供内核提供的播放器，可以嵌套在div里面，但是层级有点问题。

其中x5-video-player-fullscreen="false"，并没有达到我期待的效果，或者有效果不明显，仍旧是全屏

其他的是webkit内核提供的属性

https://webkit.org/blog/6784/new-video-policies-for-ios/

但是我现在继续解决的就是微信上面小窗口播放的问题，其他浏览器已经不抱希望

百度（~~千篇一律的无效答案~~），最后谷歌到了一位小哥的博客终于解决（实测微信6.65有效，但是不适用我这种swiper缓动整个屏幕的场景）

https://blog.csdn.net/qq_16494241/article/details/72780908

关于"h5同层播放器"：

video{ width:100%; vertical-align:middle; object-fit:contain; object-position:left top;}

可以设置视频在全屏后的位置，“全屏”可以相对整儿body文档

1.我尝试使用了腾讯X5提供的属性：

x5-video-player-type='h5' x5-video-player-fullscreen='true'

2.后给video设置display：none；

3.再通过cavnas绘制的，在最新版的微信上面可以。

但是QQ内置浏览器和QQ浏览器canvas上面上像电视机雪花屏幕一样

如果不使用腾讯提供的标签是无效的，之前就一直被埋在这个坑里走不出来。

提现下不要自作聪明使用 visibility: hidden;替代display：none；证明无效

小米自带的浏览器直接是调用小米播放器.....................无效放弃....

实际上，在安卓微信上面播放video仍旧会进入全屏模式，但是是整个页面进入全屏模式，video可以在其中播放，第一次播放视频（进去全屏模式），仍旧对页面有强烈的抖动或闪动的不友好效果。

贴下代码：

判断平台：

//平台判断
var userAgent = navigator.userAgent.toLowerCase()
var isAndroid = /android/i.test(userAgent)
var isWX = /micromessenger/i.test(userAgent)

核心代码:

var FixAndroidVideo = function(videoSrc, canvasSrc, videoW, videoH) {var TestVideo = document.getElementById(videoSrc);//获取canvas画布var TestCanvas = document.getElementById(canvasSrc);//设置画布var TestCanvas2D = TestCanvas.getContext('2d');//设置setinterval定时器var TestVideoTimer = null;//监听播放TestVideo.addEventListener('play', function() {TestVideoTimer = setInterval(function() {TestCanvas2D.drawImage(TestVideo, 0, 0, videoW, videoH);}, 20);}, false);//监听暂停TestVideo.addEventListener('pause', function() {clearInterval(TestVideoTimer);}, false);
};

html:

<video id="tenvideo_video_player_0" width="177" height="127" loop="loop"  x-webkit-airplay="allow" webkit-playsinline=""playsinline="true" x5-video-player-type="h5" x5-video-orientation="portrait" x5-video-player-fullscreen="false"preload="none" poster="//i.gtimg.cn/qqlive/images/20150608/black.png" src="#"></video>

终于解决了IOS和安卓上面的video小屏幕播放。

noscript

这是我遇到一个很有趣的问题。

我之前一直用谷歌浏览器看小说。

因为有很多广告（盗版小说），我就把谷歌浏览器的JavaScript给屏蔽掉了。

结果今天我写项目的时候死活不行。

最后才想起javascript被我屏蔽掉了。

如果用户也这样怎么办，岂不是要坑我。

恩，noscript标签挺好用的，就写一个大大的提示给他。

“如果不支持或者关闭了script，别想访问我的网站！！！”

666+

2018/01/01更新

第二天后微信video雪花播放器了，囧，无语

最后解决方法，放弃腾讯提供的X5-属性，直接样式缩放video，也放弃canvas绘制，直接提供一个蒙城诱导用户click(video只能video触发播放)

如果用户没有吃诱饵，第一次不会触发video自动播放，只有等待用户看到视频那个位置有video提供的大箭头提示才会主动去点击，之后就可以由我们控制了

3.video

关于html5 video事件的说明:这里强调的是“脚本”只要你的js运行了，就会执行对应状态的回调实际上video是否有执行该状态是无法确认的。

例如安卓微信监听playing，绑定时间click的时候播放video，事实上video并没有播放，但是playing执行了。

代码如下:

  document.addEventListener("WeixinJSBridgeReady", function() {Media.play("tenvideo_video_player_0");}, false);

 $("#tenvideo_video_player_0").one("playing", function() {if ($("#tenvideo_video_player_0")[0]) {alert("我特么的跑起来了，但是video没有播放")}})

video，audio时间在不同平台上面的特性

以下代码注意，“脚本播放”，“脚本”，“android微信”，“andorid浏览器”之间的区分

1.IOS:脚本触发播放后就可以通过脚本再次触发播放，安卓微信上面不行，例如：

document.addEventListener("WeixinJSBridgeReady", function() {Media.play("tenvideo_video_player_0");Media.play("car_audio");}, false);

之后可以通过js直接播放ID为tenvideo_video_player_0的video，而安卓微信不行

同时android 微信6.6.5不再支持WeixinJSBridgeReady触发video的播放，ios可以

android微信上面以上代码还会有个奇特的现象，如果你监听了“timeupdate”你发现它会执行，但是你的视频实际上却没有播放。

2.IOS微信可以同时脚本播放多个音频视屏，但是android微信不行，android其他浏览器可以。例如：

$(document).one("click touchstart", function() {if ($("#tenvideo_video_player_0")[0]) {$("#tenvideo_video_player_0")[0].volume = 0;Media.play("tenvideo_video_player_0");}Media.play("car_audio");})

这个代码之后可以手动让播放ID为tenvideo_video_player_0的video，但是android 微信不行

3.IOS浏览器可以通过touchstart触发audio和video的播放，但是安卓浏览器不行，例如

$(document).one("click touchstart", function() {if ($("#tenvideo_video_player_0")[0]) {$("#tenvideo_video_player_0")[0].volume = 0;Media.play("tenvideo_video_player_0");}Media.play("car_audio");})

video 在安卓版本上小窗口播放，IOS 微信 video小屏幕播放，微信全屏video相关推荐

H5的video 在安卓浏览器上层级问题
项目场景: H5的video 在安卓浏览器上层级问题问题描述 H5的video 在安卓浏览器上层级问题原因分析: 目前猜测是浏览器劫持video并且生成原生视频播放器无法用z-index控制解 ...
【已解决】使用双屏显示后，断开外接屏幕，原先外接屏幕上的窗口没法还原到原来的主屏幕上
问题现象就和题目描述的一样: 使用双屏显示后,断开外接屏幕,原先外接屏幕上的窗口没法还原到原来的主屏幕上. 解决方法如下 1.首先在状态栏上点击对应的应用: 2.然后按 Alt+空格,此时会在屏幕上 ...
使用VideoPlayer播放mp4(隐藏控件，点击全屏，窗口自适应父级)
1.npm npm install vue-video-player --save 2.main.js引入 import VideoPlayer from 'vue-video-player' imp ...
解决网页播放【鼠标移开屏幕或点击屏外视频暂停播放】
解决网页播放[鼠标移开屏幕或点击屏外视频暂停播放] 亲测有效,亲测有效,亲测有效, 当我们有时看视频时遇到以下问题,当我们点击视频播放后,视频开始播放,可当我们将鼠标移动出浏览器,或将鼠标切换到其他页 ...
android实现多画面播放,快手同框怎么弄?怎样制作多个视频同框？安卓手机上制作三个不同的视频同框播放...
同框视频都知道是什么意思吗?就是视频画面中有多个不一样的视频同时播放的效果哦,这种视频在快手等平台是很火的,那么快手同框怎么弄?今天小编的教程是实现快手同框怎么弄录好的视频,而不是解决快手同框怎么开启 ...
视屏播放_使用原生MediaPlayer+TextureView实现全屏、小窗口、视频列表、m3u8监控播放
Android 视屏播放器----MediaPlayer+TextureView实现全屏.小窗口.视频列表播放标签(空格分隔): 视屏播放器一.效果图二.集成步骤按文件目录复制进自己项目[文件 ...
手机的小窗口怎么弄_手机小窗口怎么弄出来
大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. 以苹果手机为例,其小窗口实际上就是iPhone界面的"小圆点",原名叫做"AssistiveTouc ...
Android VideoView播放项目中的视频文件自动横屏全屏播放
记录最近遇到的一个android播放视频的需求: APP主页上方有一个操作演示字样的入口,点击后开始播放一段视频,视频文件是放在工程里的. 话说以前还没做过类似播放视频的功能,根据以往的经验来看,最简 ...
vue 播放器视频插件之 vue-video-player 铺满全屏自动播放
1.安装video.js npm install video.js 2.在main.js中引入 import Video from 'video.js' import 'video.js/dist/v ...

video 在安卓版本上小窗口播放，IOS 微信 video小屏幕播放，微信全屏video

video 在安卓版本上小窗口播放，IOS 微信 video小屏幕播放，微信全屏video相关推荐

最新文章

热门文章