腾讯云直播 tcplayer，前端 vue 项目经验记录

腾讯云文档
直播拉流：https://cloud.tencent.com/document/product/454/7503

1. 在 index.html 中引入初始化脚本（可将其保存在本地）

<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js" charset="utf-8"></script>;

2. 在 vue 组件中放置容器

<div id="id_test_video" style="width:100%; height:auto;"></div>

3. 对接视频播放

getParams(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");var r = window.location.search.substr(1).match(reg);if (r != null) {return decodeURIComponent(r[2]);}return null;
},// 直播地址
getPlayUrl() {this.$api.getPlayUrl().then(res => {this.init(res.data.playUrl, res.data.img);})
}
// 初始化 视频播放器
init(video, poster) {let width = this.getParams("width");let height = this.getParams("height");var player = new TcPlayer("id_test_video", {m3u8: video, //请替换成实际可用的播放地址autoplay: false, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的poster: { style: "cover", src: poster },width: width || "480",height: height || "211",live: true,// controls:'system', // default 显示默认控件，none 不显示控件，system 移动端显示系统控件 备注：如果需要在移动端使用系统全屏，就需要设置为system。默认全屏方案是使用 Fullscreen API + 伪全屏的方式例子 pausePosterEnabled: true,volume: 0.5,systemFullscreen: true,x5_orientation: 0});document.getElementsByClassName("vcp-error-tips")[0].style.fontSize =  "14px";// 错误码提示语字体大小，因引入了rem，默认字体大小为100px.
},

video 地址格式：http://aa.com/xxxxxxx.m3u8
aa 字段为播放域名，需要 CNAME 配置，具体文档：
域名管理：https://cloud.tencent.com/document/product/267/30559
CNAME 配置： https://cloud.tencent.com/document/product/267/30560
没有配置的 m3u8 地址是播放不了的。

不知道配置对了没有可以使用 VLC media player 软件，
安装 - 菜单栏媒体 - 打开网络串流，填入你的 m3u8 地址，播放看能否成功。

而推流可以使用 OBS Studio 软件生成 m3u8 推流资源，
下载（官网要下载半小时） - 安装 - 打开
- 软件窗口下方的来源面板 - 点击+添加“显示器捕获”，
- 打开软件窗口右下方控件面板的“设置”，
- 推流选项：服务“自定义”，服务器：和上面步骤的域名管理中的推流域名有关，具体填写：
直播码接入：https://cloud.tencent.com/document/product/267/31156 地址生成器生成出来的前面一段，
而后面一段就是串流秘钥。（也可以问一下度娘怎么用 obs 进行推流）
示例：
服务器：rtmp://aa.com/live/
串流秘钥：xxxxxxxx?bizid=xx&txSecret=xxxx&txTime=xxxx
- 填写完成就可以点击开始推流了。

官方有没有支持 npm 方式？暂时是没看到有的，但有人封装了官方的 tcplayer 的非官方 npm 方式，
可以在 https://www.npmjs.com/ 这里搜索一下 tcplayer 。
可能由于技术水平不够，我搜到的 3 个都试了，仅最后一个成功了。但最后也取消了用 npm 的方式，而是用了引入保存在本地的官方 js 文件。

另外，全屏问题：

完。
仅记录，欢迎交流。

腾讯云直播 tcplayer，前端 vue 项目经验记录相关推荐

腾讯云直播功能（云直播为例）
背景项目中若涉及到即时通信IM或者直播这种业务场景的,一般都会选择第三方服务,而腾讯在这方面做的还是很好的,QQ和微信的统治力显而易见. 腾讯的服务接口都是以API文档的形式提供给开发者的,使用的时 ...
腾讯云智研发前端校招二面
腾讯云智研发前端,校招二面,base武汉,时长30分钟左右基本就是根据简历来问,深入细节,扩大广度 1.简历上的实习项目经历,问的比较详细,比如具体的某一个业务流程 (如进行单元测试的部分具体举个 ...
直播系统开发之ios对接腾讯云直播sdk
这里是使用 Swift 语言编写对接腾讯云直播 SDK 的 demo 的示例代码.这段代码仅作为参考,实际应用中可能需要根据您的具体需求进行修改. 首先,你需要从腾讯云控制台获取 SDK 的 AppI ...
android端接入腾讯云直播全过程详解（包含腾讯云点播、腾讯云IM）直播+弹幕+录制直播视频
前言为什么想到对接腾讯云直播SDK呢?答案很简单--公司需要.从开始着手对接SDK,到现在直播全程流畅跑通,花了两周零几天的时间.为了帮后续也需要接入腾讯云直播SDK的朋友节省不必要的时间.少走点弯 ...
腾讯云直播是什么？操作文档
最近小白翻看腾讯云的文档,发现一个被隐藏了的功能.那就是云直播.目前很多学校.公司都开启了云办公形式.这次老师们都在使用钉钉直播.不过钉钉还是比较卡的.如果有人可以做个更好用的直播软件就好了.好了下面 ...
腾讯云直播-开启互动直播
项目背景:基于腾讯云直播开发项目,直播交友平台1+6模式 ps : 记录自己的日常一.申请腾讯视频权限(官方链接) 首先在流管理添加一个域名类型为播放域名域名地址为推流域名的域名前缀+你的域名生 ...
腾讯云直播开发日记(三) 聊天室-直播转码-连麦混流
腾讯云直播开发日记(三) 直播的时候,用户还是需要和主播互动的,我们当前的互动就只有刷礼物,那没钱说礼物怎么搞? 不得让他们吹水? 所以我们需要做一个聊天室, 这个话自己也能做, 系统上线迫在眉睫,工 ...
SSM+MyBatis-Plus+EasyExcel+腾讯云tianai滑动验证码接入项目搭建+简单实现增、删、改、查、导入、滑动验证码功能
SSM+MyBatis-Plus+EasyExcel+腾讯云&tianai滑动验证码接入项目搭建+简单实现增.删.改.查.导入.滑动验证码功能文章末尾附源码一.什么是SSM框架 SSM框架 ...
直播app开发之对接腾讯云直播sdk-安卓
下载腾讯云直播SDK 首先,需要从腾讯云官网下载最新的腾讯云直播SDK,并将其添加到项目中. 添加权限在 AndroidManifest.xml 文件中添加以下权限: phpCopy code< ...

腾讯云直播 tcplayer，前端 vue 项目经验记录

腾讯云直播 tcplayer，前端 vue 项目经验记录相关推荐

最新文章

热门文章

腾讯云直播 tcplayer， 前端 vue 项目经验记录

腾讯云直播 tcplayer， 前端 vue 项目经验记录相关推荐

最新文章

热门文章

腾讯云直播 tcplayer，前端 vue 项目经验记录

腾讯云直播 tcplayer，前端 vue 项目经验记录相关推荐