腾讯点播云,上传视频实例, 使用点播云播放器实例

2024-02-09 01:32

本文主要是介绍腾讯点播云,上传视频实例, 使用点播云播放器实例,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

上传方法如下

在elementui自定义上传方法中必须写成promise的形式,其他的可以参考官网使用

   async up ({ commit, state }, params) {let originDomain = nullreturn new Promise((resolve, reject) => {const tcVod = new TcVod({getSignature: getSignature // 前文中所述的获取上传签名的函数})const uploader = tcVod.upload({mediaFile: params.files[0] // 媒体文件(视频或音频或图片),类型为 File})uploader.on('media_progress', info => {// info.name = params.files[0].name// info.uid  = params.files[0].uidparams.onprogress(info)})uploader.done().then(doneResult => {doneResult.video.url = doneResult.video.url.replace(originDomain, state.vodFileUrl)resolve(doneResult)}).catch(err => {reject(err)})})function getSignature () {return axios.post(state.upUrl).then(function (response) {originDomain = response.data.data.originDomainreturn response.data.data.sign})}},

elementui自定义上传使用

 <el-uploadref="upload"action=""list-type="picture-card":on-preview="handleView":on-progress="handleProgerss":on-remove="handleRemove"name="file":headers = "uploadHeaders"multipleshow-file-list:accept="'jpg,jpeg,png'"auto-upload:on-success="handleSuccess":on-exceed="handleExceed":before-upload="handleBeforeUpload":on-error="handleError":limit="limit":file-list="newFileList":http-request="uploadCos2"class="imageList"><i class="el-icon-plus"></i></el-upload>

在方法中使用上传函数,注意回调函数onprogress的使用

 async uploadCos2 (fileObj) {try{const result = await this.up({files: [fileObj.file], dirType: this.dirType, onprogress: (file)=>{const percent = file.percent?parseInt(file.percent*100):0fileObj.onProgress({ percent: percent })}})console.info(this.$refs.upload.uploadFiles)this.$refs.upload.uploadFiles.forEach(f=>{if(f.uid === fileObj.file.uid){f.url = result.video.url}})}catch(err){this.$message.error(`上传文件失败:${err}`)}},

使用点播云超级播放器

如果只有一个视频,参考官网使用,如果有多个视频,需要切换路径,参考代码如下,采用动态创建标签的形式进行使用

在template里面创建一个标签

        <div style="display: inline-block" class="my-play" id="MyPlay"></div>

在方法中使用

 playVideo () {const self = thisconst playbox = document.getElementById('MyPlay')const video = document.createElement('video')video.className = 'playsinline webkit-playsinline'video.setAttribute('id', 'tcPlayerId' + self.activeId)playbox.appendChild(video)setTimeout(() => {self.$nextTick(() => {self.loading = false// eslint-disable-next-line no-undefself.player = TCPlayer('tcPlayerId' + this.activeId, self.optionsPlayer)console.log(self.player)self.player.play()})}, 200)}
// 切换视频changeVideo (item) {if (this.activeId === item._id) {return}this.loading = truethis.activeId = item._idthis.optionsPlayer.fileID = item.uidthis.optionsPlayer.poster = item.posterif (this.player) {this.player.dispose()}this.videoPlay = {url: item.url,name: item.name,poster: item.poster}this.playVideo()},
<template><div class=" bg-gray29" v-if="videoPlay.url"><div class="flex"><div class="flex-1"><div style="display: inline-block" class="my-play" id="MyPlay"><!--          <template><video :id="'tcPlayerId' + activeId" preload="auto" ></video></template>--></div><CommonVideo v-if="false" class="border-4 border-transparent border-b-0" :videourl="videoPlay.url" :poster="videoPlay.poster?videoPlay.poster:poster"></CommonVideo></div><div class="w-96 border-t-4 border-gray29 px-2 bg-black pt-10" style="padding-top: 26px;padding-bottom: 16px;"><div class="text-1.67rem text-white font-bold">视频列表</div><div class="overflow-y-auto ms-scroll" style="height: 33rem"><div class="flex cursor-pointer" @click="changeVideo(item)" :class="[activeId===item._id?'bg-gray29 text-color-primary':'']" v-for="item in videos" :key="item._id" style="height: 90px;padding: 10px 7px" ><img :src="item.poster?item.poster +'!13120.PNG':poster +'!13120.PNG'" style="width: 124px;height: 70px;border-width: 2px;" class="object-cover border-transparent flex-none" :class="activeId===item._id?'border-color-primary':''"/><div class="flex-auto text-white pl-1 flex items-center flex-col justify-between"><div :title="item.name" style="font-size: 14px;line-height: 16px;word-wrap: break-word;word-break: break-all;" class="line-two" :class="item.active?'text-color-primary':''">{{item.name}}</div><div>{{item.duration?$moment.utc(item.duration * 1000).format('HH:mm:ss'):''}}</div></div></div></div></div></div></div>
</template><script>
import CommonVideo from '@/components/CommonVideo'
import { mapState } from 'vuex'
export default {name: 'Video',props: ['videos', 'poster', 'videoinfo'],components: {CommonVideo},data () {return {loading: false,videoPlay: {url: '',name: '',poster: ''},activeId: null,optionsPlayer: {fileID: '', // 请传入需要播放的视频 filID(必须)appID: '', // 请传入点播账号的 appID(必须)poster: '',width: 852,height: 472,preload: 'auto',plugins: {ContinuePlay: { // 开启续播功能auto: true, // [可选] 是否在视频播放后自动续播text: '上次播放至 ', // [可选] 提示文案btnText: '恢复播放' // [可选] 按钮文案}}},player: null}},methods: {changeVideo (item) {if (this.activeId === item._id) {return}this.loading = truethis.activeId = item._idthis.optionsPlayer.fileID = item.uidthis.optionsPlayer.poster = item.posterif (this.player) {this.player.dispose()}this.videoPlay = {url: item.url,name: item.name,poster: item.poster}this.playVideo()},playVideo () {const self = thisconst playbox = document.getElementById('MyPlay')const video = document.createElement('video')video.className = 'playsinline webkit-playsinline'video.setAttribute('id', 'tcPlayerId' + self.activeId)playbox.appendChild(video)setTimeout(() => {self.$nextTick(() => {self.loading = false// eslint-disable-next-line no-undefself.player = TCPlayer('tcPlayerId' + this.activeId, self.optionsPlayer)console.log(self.player)self.player.play()})}, 200)}},computed: {...mapState(['cdnUrl','appid'])},created () {this.videoPlay = {url: this.videos[0].url,name: this.videos[0].name,poster: this.videos[0].poster}this.activeId = this.videos[0]._idthis.optionsPlayer.fileID = this.videos[0].uidthis.optionsPlayer.appID = this.$store.state.appidthis.optionsPlayer.poster = this.videos[0].poster},mounted () {this.playVideo()},beforeDestroy () {if (this.player) {this.player.dispose()}}
}
</script>
<style>
.my-play .tcp-skin .vjs-big-play-button {height: 4.8em !important;width: 6.8em !important;left: 50% !important;top: 50% !important;margin-left: -3.4em !important;margin-top: -2.4em !important;font-size: 1em !important;border: 0 !important;opacity: 1 !important;z-index: 1 !important;
}
</style>
<style scoped>
#tcPlayerId{
}
.ms-scroll::-webkit-scrollbar {width: 8px;
}
.ms-scroll::-webkit-scrollbar-track {background-color:transparent;-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius:2em;
}
.ms-scroll::-webkit-scrollbar-thumb {background: #5A5A5A;-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius:2em;
}
</style>

 

这篇关于腾讯点播云,上传视频实例, 使用点播云播放器实例的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数

SpringBoot中如何使用Assert进行断言校验

《SpringBoot中如何使用Assert进行断言校验》Java提供了内置的assert机制,而Spring框架也提供了更强大的Assert工具类来帮助开发者进行参数校验和状态检查,下... 目录前言一、Java 原生assert简介1.1 使用方式1.2 示例代码1.3 优缺点分析二、Spring Fr

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

java使用protobuf-maven-plugin的插件编译proto文件详解

《java使用protobuf-maven-plugin的插件编译proto文件详解》:本文主要介绍java使用protobuf-maven-plugin的插件编译proto文件,具有很好的参考价... 目录protobuf文件作为数据传输和存储的协议主要介绍在Java使用maven编译proto文件的插件

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected

C++ Log4cpp跨平台日志库的使用小结

《C++Log4cpp跨平台日志库的使用小结》Log4cpp是c++类库,本文详细介绍了C++日志库log4cpp的使用方法,及设置日志输出格式和优先级,具有一定的参考价值,感兴趣的可以了解一下... 目录一、介绍1. log4cpp的日志方式2.设置日志输出的格式3. 设置日志的输出优先级二、Window

Ubuntu如何分配​​未使用的空间

《Ubuntu如何分配​​未使用的空间》Ubuntu磁盘空间不足,实际未分配空间8.2G因LVM卷组名称格式差异(双破折号误写)导致无法扩展,确认正确卷组名后,使用lvextend和resize2fs... 目录1:原因2:操作3:报错5:解决问题:确认卷组名称​6:再次操作7:验证扩展是否成功8:问题已解

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

Python使用vllm处理多模态数据的预处理技巧

《Python使用vllm处理多模态数据的预处理技巧》本文深入探讨了在Python环境下使用vLLM处理多模态数据的预处理技巧,我们将从基础概念出发,详细讲解文本、图像、音频等多模态数据的预处理方法,... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核