video组件-腾讯视频播放插件3.0新版本的使用方法总结

用户10106350

发布于 2022-10-28 11:30:39

2.2K0

发布于 2022-10-28 11:30:39

文章被收录于专栏：WflynnWeb

代码已上传至github

github代码地址：https://github.com/Miofly/mio.git

腾讯视频播放插件3.0，支持IOS与安卓播放，兼容性也比较完善。

使用场景：PC端和移动端腾讯视频统一播放器是视频应用于全平台播放(电脑，手机，平板电脑，电视[Sumsang],支持点播和直播,支持自定义插件的JavaScript框架。可根据实际需要，选择使用JavaScript 或 IFrame两种方式来使用

相关API地址：

https://tgideas.qq.com/doc/frontend/component/common/txplayer.html

https://m.v.qq.com/txp/v3/src/jsapi/events.html

引入的js

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <meta content="yes" name="apple-mobile-web-app-capable"/>
  <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
  <meta content="telephone=no" name="format-detection"/>
  <meta content="email=no" name="format-detection"/>
  <title>.</title>
  <link rel="stylesheet" type="text/css" href="./index.css"/>
  <script type="text/javascript" src="./js/jquery.js"></script>
  <script type="text/javascript" src="./js/adaptive.js"></script>
  <script type="text/javascript" src="./js/txplayer.js"></script>
  <script type="text/javascript" src="./js/jsmpeg.min.js"></script>
  <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
</head>

txplayer.js 腾讯视频插件js

jweixin-1.2.0.js 解决ios不能自动播放问题

HTML代码

<body>
<div class="video-wrap">
  <div id="mod_player" style="display: none"></div>
</div>

一些JS的用法

var obj = {
        vid: 'a0919rdlm06',
    // pic: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592233151580&di=bf46119ff4fcb33b35497c7bbab6cd5a&imgtype=0&src=http%3A%2F%2F00.minipic.eastday.com%2F20170511%2F20170511132314_6cab43df10415723a8f3bdd9dc5364ed_8.jpeg',
        playStatus: '1',
        delayTime: 30,
  }

    var player = new Txplayer({ // 初始化一些数据
        containerId: 'mod_player',
        vid: obj.vid,
        width: '100%', // 数值600
        height: screen.availHeight / 1.5,
        autoplay: true,
        playStartTime: 200,
        isUsePreload: true, // 是否预加载
        // useMiniSkin: true,
        miniSkinAdaptive: true,
        poster: obj.pic,
        showBullet: true,
        showBulletInput: true
    });
    var _playStatus = obj.playStatus;
    if(location.href.indexOf('continue') > -1){
        _playStatus = 'continue';
    }
    player.on('ready', () => {

    });

     // ios自动播放的方法 利用 jweixin-1.2.0.js 实现
    document.addEventListener('WeixinJSBridgeReady',function(){
        player.play();
    },false);

    var temp = 'a'
    player.on('timeupdate', (parmas) => { // 播放进度发生变化监听
        if (parmas.videoTag.currentTime < 1) {
            // player.enterBrowserFullscreen(); // 全屏播放
        }

        if (_playStatus == 'continue' && temp == 'a') { // 分享完成从断点播放
            setTimeout( () => {
                parmas.videoTag.currentTime = obj.delayTime
            }, 100)
            temp = 'b'
        }
        if (player.getCurrentTime() == player.getDuration()) {
            console.log('视频播放结束事件')
        }

        if (_playStatus != 'continue' && parmas.videoTag.currentTime >= obj.delayTime) {
            player.pause();
             console.log('断点处跳转')
        }
    });

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-06-17，如有侵权请联系 cloudcommunity@tencent.com 删除

网络安全