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

2023年2月18日 158次阅读 来源: 艾特猫

目录：

  1. 安卓和ios微信video小窗口播放（太水，可以直接跳过）
  2. noscript标签
  3. 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 在安卓版本上小窗口播放，IOS 微信 video小屏幕播放，微信全屏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");
            
        })

    原文作者：艾特猫
    原文地址: https://blog.csdn.net/u014071104/article/details/79750815
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞