vue中使用腾讯视频播放器

参考:https://m.v.qq.com/txp/v3/src/jsapi/

下载腾讯视频的js

https://vm.gtimg.cn/tencentvideo/txp/js/txplayer.js

http://vm.gtimg.cn/tencentvideo/txp/js/txplayer.js

在页面新建一个视频播放的父级div

<div id="container" class="video-wrapper"></div>

引入腾讯视频js

import "../../../service/txplayer";// 这里放腾讯视频js在本地的路径

创建播放:

 playerInit(vid) {//调用且传腾讯视频的id即可
      var player = new Txplayer({
        containerId: "container",//上面第一步html的id
        vid: vid,
        width: "100%",
        height: screen.availHeight / 3,
        autoplay: true,
      });
    },

 

Vue使用乐橙播放器可以通过以下步骤实现: 1. 安装乐橙播放器:首先,在Vue项目的根目录下使用npm或yarn安装乐橙播放器的依赖包。可以通过运行命令`npm install --save lcobcos`, 或`yarn add lcobcos`来完成安装。 2. 引入乐橙播放器:在要使用乐橙播放器Vue组件,通过import语句引入乐橙播放器的相关组件。例如,可以在组件的script标签添加以下代码:`import { Player } from 'lcobcos'`。 3. 使用乐橙播放器组件:在Vue组件的template,添加乐橙播放器组件的标签,并为其定义必要的属性。例如,可以使用`<Player :vid="videoId" />`标签来添加乐橙播放器,其videoId是一个在组件的data定义的变量,用于指定要播放的视频ID。 4. 配置乐橙播放器参数:在Vue组件的methods或created生命周期钩子函数,可以使用乐橙播放器提供的方法和事件来配置播放器的参数和处理播放器的状态。例如,可以在created生命周期钩子函数使用`playerInstance.on('ready', handleReady)`来监听播放器就绪事件,并在handleReady方法添加其他配置。 5. 控制播放器:通过调用乐橙播放器实例上的方法,可以控制播放器的播放、暂停、音量等。例如,可以在Vue组件的methods使用`playerInstance.play()`方法来开始播放视频。 通过以上步骤,就可以在Vue成功使用乐橙播放器播放视频了。当然,具体的用法还要根据乐橙播放器的文档进行相应的配置和调用。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值