zoukankan      html  css  js  c++  java
  • X5内核浏览器,video兼容

    使用vue-video-player在移动端微信内置浏览器打开,点击视频自动全屏问题。 参考官方 API 是 H5 同层浏览器的原因,可通过设置video属性来处理。 

     <video-player class="video-player vjs-custom-skin "
            ref="videoPlayer"
            :playsinline='true'
            :options='videoOptions'
            @canplay="onPlayerCanplay($event)"
           >
     </video-player>
    onPlayerCanplay (player) {    
                let ua = navigator.userAgent.toLocaleLowerCase()
             
                // x5内核
                if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
    
                    $('body').find('video')
                    .attr('x-webkit-airplay', 'true')  //设置允许设备播放
                    .attr('x5-playsinline', 'true')  // 设置android在微信中内联播放视频
                    
                    .attr('x5-video-player-type','web') // 关闭同层X5内核播放器    x5-video-player-type='h5' 启用H5同层播放器
                    // .attr('x5-video-player-fullscreen','true')  // 进入全屏通知
                    .attr('x5-video-orientation','portrait')  //控制横竖屏 可选值: landscape 横屏, portraint竖屏  默认值:portraint
                } else {
                    // ios端
                    // alert('ios')
                    $('body').find('video')
                    .attr('webkit-playsinline', 'true')  //设置ios在微信中内联播放视频 ios9
                    .attr('playsinline', 'true')    //设置ios在微信中内联播放视频 ios10/ios11
                }
            },
  • 相关阅读:
    mybatis中的延迟加载
    MyBatis的mapper
    MyBatis的resultMap
    mybatis入门
    mybatis中的#和$的区别(转)
    操作日志记录
    SpringMVC中的异常处理集锦
    vue.js的package.json相关问题解惑
    git的常用操作指令
    http协议参数详解
  • 原文地址:https://www.cnblogs.com/yxdlm/p/10880134.html
Copyright © 2011-2022 走看看