vue中使用腾讯云视频播放器

1.index.html

<!-- 引入腾讯云视频 --><script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.0.js" charset="utf-8"></script>;

2.使用

<!--* @Author: your name* @Date: 2020-07-09 14:16:25* @LastEditTime: 2020-07-10 16:22:27* @LastEditors: Please set LastEditors* @Description: In User Settings Edit* @FilePath: \puhuiApp3.10(直播页面)\src\components\liveStream\liveStreamVideo\liveStreamVideo.vue
-->
<style lang="less" scoped>
.liveStreamVideo {#id_test_video {width: 100%;height: 100vh;/deep/ .vcp-fullscreen-toggle {display: none;}}
}
</style>
<template><div class="liveStreamVideo"><div id="id_test_video"></div></div>
</template><script>
export default {name: "liveStreamVideo",components: {},props: {},data() {return {// 视频控制器options: {rtmp:"rtmp://www.isst.top/live/162?txSecret=42a1ca6175158c25e1f54e5076fce16c&txTime=5F03F39E",// m3u8:"",m3u8:"http://hls01open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.hd.m3u8",// m3u8:"https://cdn.letv-cdn.com/2018/12/05/JOCeEEUuoteFrjCg/playlist.m3u8",flv: "", //请替换成实际可用的播放地址autoplay: true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的poster:"http://pic.yihuisoft.com/images/user_head_image/502-HeadPortrait.jpg?Expires=1904905330&OSSAccessKeyId=LTAI4FhfG8aSXdd1fPbFVPgk&Signature=GHK43KMjAGXgNQzulh6jxAFN7W4%3D",width: "100%",height: "100%",coverpic: {style: "stretch",src:"http://pic.yihuisoft.com/images/user_head_image/502-HeadPortrait.jpg?Expires=1904905330&OSSAccessKeyId=LTAI4FhfG8aSXdd1fPbFVPgk&Signature=GHK43KMjAGXgNQzulh6jxAFN7W4%3Dg"},wording: {2032: "请求视频失败，请检查网络",2048: "请求m3u8文件失败，可能是网络错误或者跨域问题"},controls: "default", //控制器h5_flv: true,x5_player: true,x5_type: "h5",x5_fullscreen: true,x5_orientation: 1,listener: function(msg) {console.log(msg);}}};},watch: {},computed: {},methods: {// 初始化直播initVideo(ele) {try {new TcPlayer(ele, this.options);} catch (error) {console.log(error);}}},created() {},mounted() {this.initVideo("id_test_video")}
};
</script>

vue中使用腾讯云视频播放器相关推荐

vue中安装和使用Dplayer视频播放器
1.下载 npm下载 npm install dplayer - s npm i hls.js -s yarn下载 yarn add dplayer yarn add hls.js 2.使用 < ...
【Android视频之阿里云视频播放器二】
说明一下:写文章时,我用的最新sdk版本是 4.7.0 哦,这里也只贴出关键代码,更多详细代码在文章末尾有地址链接的. [Android视频之阿里云视频播放器一] 1 视频试看功能的实现效果图 ...
微服务项目实战技术点汇总：“尚硅谷的谷粒在线教育”九、整合阿里云视频播放器、课程评论功能、讲师详情页、课程详情页、检索功能、课程和讲师列表功能
文章目录一.讲师 1.分页查询接口(后端) 1.controller 2.service 3.测试 2.分页显示讲师(前端) 3.讲师详情页(后端) 1.controller 2.测试 4.讲师详情 ...
【Android视频之阿里云视频播放器一】
说到视频,现在短视频,小视频真是火的不行,抖音,快手,更是很多人手机上必会安装的一款app.那如何开发一款类似于抖音,集视频播放,直播,点播,拍摄,滤镜于一体的app呢,想想那都是相当的复杂.说到这里 ...
vue中使用腾讯地图选择地址
腾讯地图选择地址引发的一系列问题 2019/12/14更新修复了自治区/直辖市无法选择的bug(比如上海之类的城市) 采用更加友好的方式来选择地址新的文章链接:vue中使用腾讯地图选择地址(二) ...
Spring Boot中使用腾讯云短信服务
第一步:在腾讯云官方网站开通短信服务第二部:开通后,在短信控制面板中找到国内短信第三步:点击签名管理并创建签名第五步:点击正文模板管理并创建正文模板第六步:在pom文件中添加腾讯云短信依赖 & ...
uniapp插件-腾讯云播放器sdk插件-腾讯云高清播放器-多码率支持-截图-播放控制-变速播放
目前仅做了安卓版本,如果需求量可以的话我们会制作IOS版本的. 使用方法: 腾讯云播放器腾讯云目前是免费的,后期不知道,需要注册请访问腾讯云官网,优雅草伙伴注册链接: 点击访问腾讯云官网关联优雅草科 ...
Html5酷播云视频播放器同层播放(代码实例)
在Android手机上使用H5播放视频时,大多数的国内浏览器厂商都会在视频播放时劫持<video>标签,使用浏览器自带的播放器播放视频,而且播放器会处于最高层级,视频上面无法显示其它htm ...
在vue中使用video.js实现视频播放
学习笔记这里是官方关于在vue中如何使用的文档,下面的只是基于官方文档的基础用法,详细内容建议查看官方文档! 官方文档以此为例先看效果: 大致步骤如下: 一.安装video.js npm ins ...

vue中使用腾讯云视频播放器

vue中使用腾讯云视频播放器相关推荐

最新文章

热门文章