vue3中TCplayer应用

在这里插入图片描述
环境win10:vite+vue3+elementUI

1 安装

npm install tcplayer.js

2 使用

<template><div><video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline></video></div><el-button type="" @click="do_click"> > </el-button>
</template><script setup>
import TCPlayer from 'tcplayer.js';
import {reactive, ref,onMounted} from "vue";const fid = ['387702307847129127','3701925921299637010']
let player = reactive(null)
function do_click(params) {console.log('--------------',player);player.src("https://1500005692.vod2.myqcloud.com/43843706vodtranscq1500005692/62656d94387702300542496289/v.f100240.m3u8")
}
onMounted(()=>{//init playerplayer = TCPlayer('player-container-id', { // player-container-id 为播放器容器 ID,必须与 html 中一致fileID: '387702307859199833', // 请传入需要播放的视频 fileID(必须)appID: '1500006438', // 请传入点播账号的 appID(必须)//私有加密播放需填写 psign, psign 即播放器签名,签名介绍和生成方式参见链接:https://cloud.tencent.com/document/product/266/42436psign:'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDAwNjQzOCwiZmlsZUlkIjoiMzg3NzAyMzA3ODU5MTk5ODMzIiwiY3VycmVudFRpbWVTdGFtcCI6MTY2NzIzOTE1MywiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJPcmlnaW5hbCIsImltYWdlU3ByaXRlRGVmaW5pdGlvbiI6MTB9LCJleHBpcmVUaW1lU3RhbXAiOjIyMDYyODE2MDAsInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTUwMDAwNjQzOC52b2QyLm15cWNsb3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.k6__4IcCUq1QzZUijsntfIqrXCDuk6TQagrpAh0WEyw',licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1310752424_1/v_cube.license',});})
</script><style scoped>
@import url("//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css");
</style>

license 问题

licenseUrl: ‘https://license.vod2.myqcloud.com/license/v2/1310752424_1/v_cube.license’’
代码里面的是我自己免费申请的.时长14天.
这个东西是8.16更新的时候加的

免费申请web License 链接
下面是sdk的更新日志:
在这里插入图片描述

官网demo

https://cloud.tencent.com/document/product/881/20204

在这里插入图片描述

参考

https://cloud.tencent.com/document/product/881/30818
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/69004.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

联发科MTK6762/MT6762核心板_安卓主板小尺寸低功耗4G智能模块

MT6762安卓核心板是一款基于MTK平台的高性能智能模块&#xff0c;是一款工业级的产品。该芯片也被称为Helio P22。这款芯片内置了Arm Cortex-A53 CPU&#xff0c;最高可运行于2.0GHz。同时&#xff0c;它还提供灵活的LPDDR3/LPDDR4x内存控制器&#xff0c;此外&#xff0c;Medi…

[C++] Lambda表达式

Lambda表达式语法定义 Lambda 表达式的基本语法如下&#xff1a; [capture-list] (parameters) -> return-type {// 函数体 }例子: int x 10; auto function [](int a, int b) mutable -> int {return a b x; }int ret function(10, 20); // 输出50Lambda表达式参…

【FreeRTOS】【应用篇】消息队列【下篇】

前言 本篇文章主要对 FreeRTOS 中消息队列的概念和相关函数进行了详解消息队列【下篇】详细剖析了消息队列中发送、接收时队列消息控制块中各种指针的行为&#xff0c;以及几个发送消息和接收消息的函数的运作流程笔者有关于 【FreeRTOS】【应用篇】消息队列【上篇】——队列基…

leetcode分类刷题:哈希表(Hash Table)(四、前缀和 处理连续子数组)

1、leetcode题目里对于元素加和的考察可谓是屡见不鲜&#xff0c;包括 简单的限定一个有效答案的两个或多个元素求和leetcode分类刷题&#xff1a;哈希表&#xff08;Hash Table&#xff09;&#xff08;一、简单的两数之和&#xff09;、在有序数组内对加和等于target的三元组…

【链表OJ 11】复制带随机指针的链表

前言: &#x1f4a5;&#x1f388;个人主页:​​​​​​Dream_Chaser&#xff5e; &#x1f388;&#x1f4a5; ✨✨刷题专栏:http://t.csdn.cn/UlvTc ⛳⛳本篇内容:力扣上链表OJ题目 目录 leetcode138. 复制带随机指针的链表 1. 问题描述 2.代码思路: 2.1拷贝节点插入到…

【文心一言大模型插件制作初体验】制作面试错题本大模型插件

文心一言插件开发初体验 效果图 注意&#xff1a;目前插件仅支持在本地运行&#xff0c;虽然只能自用&#xff0c;但仍然是一个不错的选择。&#xff08;什么&#xff1f;你说没有用&#xff1f;这不可能&#xff01;文心一言app可以支持语音&#xff0c;网页端结合手机端就可…

Android Studio设置

Android Studio设置 一、主题 1.下载插件并重启 Material Theme UI 2.下载插件ChroMATERIAL 3.设置主题File >> Settings >> Editor >> Colors Scheme >> Scheme >> ChroMATERIAL 4.设置logcat色值File → Settings → Editor → Colors Schem…

计算机网络第三节物理层

一&#xff0c;第二章 物理层&#xff08;数据通信有关&#xff09; 1.物理层引入的目的 屏蔽掉传输介质的多样性&#xff0c;导致数据传输方式的不同&#xff1b;物理层的引入使得高层看到的数据都是统一的0,1构成的比特流 2.物理层如何实现屏蔽 物理层靠定义的不同的通信…

12 | 使用 Spark SQL执行CURL

Spark SQL 是 Apache Spark 生态系统中的一个组件,它提供了用于结构化数据处理和分析的高级接口。Spark SQL 可以让用户使用 SQL 语言来查询和操作数据,同时也提供了强大的分布式计算能力。下面是关于 Spark SQL、SparkSession 和 DataFrame 的关键点: 1. Spark SQL: 定义…

智慧园区用水用电信息管理系统:实现高效节能的现代化园区管理

随着科技的不断发展&#xff0c;各类产业园区在我国经济社会发展中发挥着越来越重要的作用。为了提高园区的运营效率、降低能源消耗、实现绿色可持续发展&#xff0c;智慧园区用水用电信息管理系统应运而生。本文将从系统背景、功能特点、应用优势等方面进行详细介绍。 一、系统…

【Linux】进程间通信与同步

IPC进程间通信 无名管道pipe&#xff08;血缘关系的进程&#xff09;有名管道fifo &#xff08;无血缘关系的进程&#xff09;共享内存信号(开销小)消息队列信号量套接字 进程间同步 文件锁信号量

java八股文面试[数据库]——索引下推

什么是索引下推&#xff1f; 索引下推&#xff08;index condition pushdown &#xff09;简称ICP&#xff0c;在Mysql5.6的版本上推出&#xff0c;用于优化查询。 需求: 查询users表中 "名字第一个字是张&#xff0c;年龄为10岁的所有记录"。 SELECT * FROM users…

element+vue table表格全部数据和已选数据联动

1.组件TableChoose <template><div class"tableChooseBox"><div class"tableRow"><div class"tableCard"><div class"tableHeadTip">全部{{ labelTitle }}</div><slot name"body" …

Jupyter Notebook 好用在哪?

Jupyter Notebook 是一个 Web 应用程序&#xff0c;便于创建和共享文学化程序文档&#xff0c;支持实时代码、数学方程、可视化和 Markdown&#xff0c;其用途包括数据清理和转换、数值模拟、统计建模、机器学习等等。目前&#xff0c;数据挖掘领域中最热门的比赛 Kaggle 里的资…

MySQL用navicat工具对表进行筛选查找

这个操作其实很简单&#xff0c;但是对于没操作的人来说&#xff0c;就是不会呀。所以小编出这一个详细图解&#xff0c;希望能够帮助到大家。话不多说看图。 第一步&#xff1a; 点进一张表&#xff0c;点击筛选。 第二步&#xff1a; 点击添加 第三步&#xff1a; 选择要…

诗诺克科技引领数字资产智能交易革命

在当今全球金融市场中&#xff0c;数字资产的崛起正引发着一场前所未有的变革。随着区块链技术不断演进和数字资产广泛获得认可&#xff0c;智能交易系统正在迅速成为投资者和交易者的首选工具。这一趋势不仅在全球范围内显著&#xff0c;而且为金融领域的未来带来了令人瞩目的…

前端、后端面试集锦

诸位读者&#xff0c;我们在工作的过程中&#xff0c;经常会因跳槽而面试。 你开发能力很强&#xff0c;懂得技术也很多&#xff0c;若加上条理清晰的面试话术&#xff0c;可以让您的面试事半功倍。 个人博客阅读量破170万&#xff0c;为尔倾心打造的 面试专栏-前端、后端面试…

【ES6】fetch函数和Promise

fetch函数是现代JavaScript中用于发起HTTP请求的一个非常强大的工具。它返回一个Promise&#xff0c;这个Promise在请求成功时解析为Response对象&#xff0c;或者在请求失败时拒绝。 以下是一个基本的fetch使用示例&#xff1a; fetch(https://api.example.com/data).then(r…

总结开发中一些数据处理方法的封装

摘要&#xff1a; 开发中经常会遇到一些组件需要的特定数据结构&#xff0c;后端不一定会返回你需要的数据结构的&#xff0c;所以还是要前端来处理的&#xff01;这里来总结一下平常开发中遇到的需要处理结构的方法&#xff0c;下次遇到直接拿来用就可以了&#xff01; 目录概…

mac苹果电脑删除顽固残留软件图标

核心&#xff1a;删除“启动台”数据库里对应app的信息 1、打开访达&#xff08;Finder&#xff09;&#xff0c;点击最顶部菜单栏的【前往》前往文件夹】&#xff0c;接着输入【/private/var/folders】 2、在弹出的访达&#xff08;Finder&#xff09;窗口搜索栏输入【com.ap…