前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >腾讯视频统一播放器插件的踩坑记录

腾讯视频统一播放器插件的踩坑记录

作者头像
用户10106350
发布2022-10-28 13:35:37
1.2K0
发布2022-10-28 13:35:37
举报
文章被收录于专栏:WflynnWebWflynnWeb

官方网站:https://m.v.qq.com/txp/v3/src/jsapi/demos.html

腾讯视频统一播放器是视频应用于全平台播放(电脑,手机,平板电脑,电视[Sumsang],支持点播和直播,支持自定义插件的JavaScript框架。

基础使用

代码语言:javascript
复制
// html
<div id="mod_player"></div>

// js
var player = new Txplayer({
    containerId: 'video_tag',
    vid: 'r0018hmh1pa',
    width: '100%',
    height: screen.availHeight / 2,
    // poster: obj.pic 视频封面地址
    // 自动播放
    autoplay: false,
});
var _playStatus = obj.playStatus;

下面是一些方法的踩坑记录

代码语言:javascript
复制
player.on('ready', () => { // 初始化使用下面的方法时必须先声明这个,不管里面写不写内容

});
代码语言:javascript
复制
var temp = 'a'
player.on('timeupdate', (parmas) => {
    if (temp == 'a') { // 此方法用于让视频跳转到指定位置播放
    // 虽然player提供了seekTo方法用于跳转到指定位置
    // 但是在4G环境下此方法无效,只能采用下列方法解决
        setTimeout( () => { // 部分机型在4G下不加定时器,也无法跳转
            parmas.videoTag.currentTime = 200
        }, 500)
        temp = 'b'
    }
    if (player.getCurrentTime() == player.getDuration()) { // 用于播放结束触发时间
        
    }

    if (parmas.videoTag.currentTime >= obj.delayTime) { // 用于在播放到指定时间调用下列事件
        
    }
});

Txplayer支持的事件

  • 事件监听: player.on(eventName, callback)
  • 事件触发: player.trigger(eventName, args)
  • 事件取消: player.off(eventName, [callback])
  • 事件监听一次: player.once(eventName, callback)

事件列表

事件监听
  • ready [播放器初始化完成]
  • error [播放出错]
  • volumeChange [音量发生变化]
  • timeupdate 在ready之后监听 [播放时间点变化]
  • playStateChange [播放状态变化]
  • definitionChange [清晰度发生变化]
  • vidChange [播放的视频发生变化]
  • smallWindowModeChange [进入或退出小窗口模式]
  • showUIVipGuide [显示vip付费浮层]
  • browserFullscreenChange [浏览器全屏状态变化]
  • windowFullscreenChange [系统全屏状态变化]
  • adStart [广告开始]
  • adEnd [广告结束]
  • languageSet [语言切换完成]
  • showLoginGuide [清晰度切换720p时,要求登录,此时会触发这个事件,使用方需要监听此事件,处理登录逻辑] 对应的api closeLoginGuide
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-03-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 WflynnWeb 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Txplayer支持的事件
    • 事件列表
    相关产品与服务
    云直播
    云直播(Cloud Streaming Services,CSS)为您提供极速、稳定、专业的云端直播处理服务,根据业务的不同直播场景需求,云直播提供了标准直播、快直播、云导播台三种服务,分别针对大规模实时观看、超低延时直播、便捷云端导播的场景,配合腾讯云视立方·直播 SDK,为您提供一站式的音视频直播解决方案。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档