记录 UNI-APP webview 组件嵌入txplayer 自动播放问题

救世大侠

已于 2022-03-13 14:52:46 修改

阅读量2k

点赞数 1

分类专栏：日常记录文章标签： js html

于 2020-09-08 10:13:48 首次发布

本文链接：https://blog.csdn.net/qq863662170/article/details/108462671

版权

日常记录专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近遇到个问题，uni-app 项目需要使用腾讯云点播，又不想使用原生组件开发模式。所以想到的办法就是使用webview组件嵌入本地网页的方法。
要想打开视频就自动播放，文档上给的办法是设置autoplay 和 muted为true，虽然能自动播放但是是静音播放，不能满足需求。网上找了许久没有发现解决办法。
无意间发现，本地html 使用document.createElement 动态创建video标签后，在实例化播放器就可以实现打开视频自动播放，无需设置静音。基本满足当前的需求，目前测试了IOS 安卓还未测试是否可行，先写在这里，留作记录。
目前只想到这个办法，暂未想到更好的方法。
下面是实现代码webview 嵌入的html代码(伪代码不一定能运行)


<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
    <link href="./css/tcplayer.css" rel="stylesheet" />
  </head>
  <body>
    <div id="videoBox"></div>
  </body>
</html>

// 引入js
<script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
<script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>
<script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script>
  var play = -1
  var appID = 'appid'
  var fileID = ''
  var player = null

  document.addEventListener('UniAppJSBridgeReady', function () {
   // 和外面webview 通讯监听
  }

  function delclick() {
    // console.log('关闭')
    Vdispose()
    sendMessage()
  }

  function sendMessage() {
  //这是和外层通讯逻辑
    console.log('发送信息')
    uni.postMessage({
      data: {
        
      },
    })
   //。。。。。
  }

  //webview.evalJS(playVideo)；该函数在webview那个组件调用
  function playVideo(info) {
    const poster = info.poster
    const psign = info.psign
    if (player) {
      Vdispose()
    }
    let fileid = info.fileid
    play = info.play
   // 。。。。。
    if (!document.getElementById('player-container-id')) {
    //这是主要代码 可以实现自动播放效果
      let video = document.createElement('video')
      video.setAttribute('id', 'player-container-id')
      video.setAttribute('preload', 'auto')
      video.setAttribute('playsinline', true)
      video.setAttribute('webkit-playsinline', true)
      video.setAttribute('x5-playsinline', true)
      document.getElementById('videoBox').appendChild(video)
    }
    //一些逻辑
  }
  
  function createPlayer(psign, poster = '', fileid, autoplay = false, controlBar = false) {
    player = TCPlayer('player-container-id', {
      fileID: fileid,
      appID: appID,
      autoplay: autoplay,
      poster: poster,
      psign: psign,
      controlBar: getControlConfig(controlBar),
    })
    player.on('ended', () => {
    //一些逻辑
      sendMessage()
    })
  }
  function getControlConfig(config = true) {
    return {
      playToggle: config, //是否显示播放、暂停切换按钮。
      progressControl: config, //是否显示播放进度条。
      volumePanel: config, //是否显示音量控制。
      currentTimeDisplay: config, //是否显示视频当前时间。
      durationDisplay: config, //是否显示视频时长。
      timeDivider: config, //是否显示时间分割符。
      playbackRateMenuButton: config, //是否显示播放速率选择按钮。
      fullscreenToggle: config, //是否显示全屏按钮。
      QualitySwitcherMenuButton: config, //是否显示清晰度切换菜单。
    }
  }
  function Vplay() {
    player.play()
  }
  function Vpause() {
    player.pause()
  }
  function Vdispose() {
    // console.log("销毁")
    player.dispose()
    player = null
  }
</script>

救世大侠

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
记录 UNI-APP webview 组件嵌入txplayer 自动播放问题

最近遇到个问题，uni-app 项目需要使用腾讯云点播，又不想使用原生组件开发模式。所以想到的办法就是使用webview组件嵌入本地网页的方法。要想打开视频就自动播放，文档上给的办法是设置autoplay 和 muted为true，虽然能自动播放但是是静音播放，不能满足需求。网上找了许久没有发现解决办法。无意间发现，本地html 使用document.createElement 动态创建video标签后，在实例化播放器就可以实现打开视频自动播放，无需设置静音。基本满足当前的需求，目前测试了IOS 安卓还
复制链接

扫一扫