VUE2使用使用百度视频播放器实现视频点播

VUE项目开发，使用jessibuca——实现直播流播放器

百度云web播放器: Cyberplayer3.0 Demo
播放器参考: API
播放器引入组件: cyberplayer
效果图：

第一步：在项目的根目录下找到public文件夹，然后再public文件夹下方的index.html，引入jessibuca.js。即可使用该播放器: cyberplayer
第二步：public/index.html页面引入

CyberPlayer.vue

<template><div><div v-loading="loading" id="playercontainer"></div></div>
</template><script>// npm install --save html2canvas
// 实现视频截图必须加载html2canvas
import html2canvas from 'html2canvas';const defaultSetting = {width: '100%',height: '470',title: "监控视频",isLive: false,autostart: true,stretching: 'uniform',volume: 100,starttime: 0,controls: true,rightclick: [{title: '违章设置',link: 'javascript:console.log("hello")'}],ak: 'bff33adbdad144329cf47c88a2d45cb8'
};/*** CyberPlayer* * 描述: 封装百度cyberplayer控件(文档: https://cloud.baidu.com/doc/MCT/s/zjwvz4w4z, demo: http://cyberplayer.bcelive.com/demo/new/index.html)* * 调用方法:*   screenshot() 暂停当前播放视频并截图*   playVideoAtIndex() 点播视频*   pause() 暂停视屏*   getInfo() 获取当前播放视频信息* * 事件:*   playlistItem(item) 播放列表模式点播后返回当前播放视频的信息*   screenshot(obj) 返回截图图片数据和处于视频中的位置*  */
export default {name: "CyberPlayer",props: {file: String,playList: Array,cueList: Array,thumbnails: Array,taskId:String,typeSelection:String},data() {return {loading: falseplayer: null,setting: Object.assign({}, defaultSetting),// cyberplayer: null}},created() {},mounted() {// this.cyberplayer = cyberplayerif(this.typeSelection == "wzsz") {this.initPlayer();}},watch: {file(newVal, oldVal) {if (newVal) {this.initPlayer();}},playList(newVal, oldVal) {if (newVal) {this.initPlayer();}}},methods: {initPlayer() {let that = thisif (this.player != null) {this.player.remove();}// 播放设置this.setting = Object.assign({}, defaultSetting);if (this.file) {this.setting.file = this.file;} else {this.setting.playlist = this.playList;}setTimeout(() => {this.player = cyberplayer("playercontainer").setup(this.setting);this.player.onReady((e) => {// 设置视频支持跨域请求let video = document.getElementById('playercontainer').getElementsByClassName('jw-video')[0];if (video) {video.crossOrigin = "anonymous";}});this.player.onPlaylistItem((e) => {// debuggerconsole.log('onPlaylistItem', e);this.$emit("playlistItem", e.item);});this.player.onBeforePlay((e) => {// console.log('onBeforePlay', e);});this.player.onPlay((e) => {// console.log('onPlay', e);});}, 350)// 初始化},setInfo(info) {this.player.setCues(info.cues);this.player.setThumbnails(info.thumbnails);},rightClick: function () {console.log('right click');},/* 外部调用方法 */screenshot: function () {if (this.loading) {return;}// 如果没有视频则退出不截图let player = this.playervar playlistIndex = player.getPlaylistIndex();var playlist = player.getPlaylist();let videoId = playlist[playlistIndex].id;let tagStartTime = player.getPosition()player.pause()if (!this.player) {this.$message({type: 'warning',message: '没有视频播放'});return;}this.loading = true;this.pause(); // 截图之前先暂停播放let position = this.player.getPosition();let video = this.player.getPlaylistItem();let $ele = document.getElementById('playercontainer').getElementsByClassName('jw-video')[0];var w = $ele.offsetWidth;var h = $ele.offsetHeight;html2canvas($ele, {width: w,height: h,allowTaint: true,  //检测每张图片都已经加载完成useCORS: true,    //使用跨域(当allowTaint为true时这段代码没什么用)logging: true,    //开启日志}).then((canvas) => {let base64 = canvas.toDataURL("image/png");let data = {base64:base64,videoId:videoId,tagStartTime: tagStartTime}this.loading = false;this.$emit("screenshot", data);});},playVideoAtIndex(index, happenTime = 0) {if (this.player) {this.player.playlistItem(index);this.player.seek(happenTime);}},playVideoWzIndex(index, happenTime) {if (this.player) {this.player.playlistItem(index);this.player.seek(happenTime);}},pause() {if (this.player) {this.player.pause();}},getInfo() {if (this.player) {return {state: this.player.getState(),item: this.player.getPlaylistItem(),position: this.player.getPosition()}} else {return {state: "none"};}}}
}
</script><style scoped>
</style>

PlanVideoInDialog.vue(我这里是通过弹框实现)

<template><el-dialog:visible="true"title="视频"style="font-size: 18px"width="1600px"height="750"@close="dialogShowBtn":close-on-click-modal="false"><div style="display: flex"><div style="width: 75%; margin-right: 20px"><div><p class="mtxt">录像回顾</p><cyber-playerref="player":playList="playlist":indexNum="indexNum":taskId="id":tagStartTime="tagStartTime"@getVideoBreakRules="getVideoBreakRules"@screenshot="onScreenshot"@playlistItem="getVideoBreakRules"/></div><el-buttontype="primary"size="mini"style="margin-top: 4px"@click="handleClick">违章设置</el-button><div style="margin-top: 10px"><p class="mtxt">信息列表</p><el-tabs v-model="activeListName" @tab-click="handleJbxxClick"><el-tab-pane label="视频列表" name="splb"><VideoList:selItemId="selItemId":videoList="videoList":playerObj="playerObj":storageApi="storageApi"@onClose="dialogVideoBtn"></VideoList></el-tab-pane><el-tab-pane label="违章记录" name="wzjl"></el-tab-pane></el-tabs></div></div><div style="height: 670px; width: 25%"><p class="mtxt">督查信息</p><SupervisionInformation:supervisionList="supervisionList":supervisionTaskList="supervisionTaskList"></SupervisionInformation></div></div><div class="dialog-footer"><el-button class="g-background00BCD4" @click="dialogShowBtn">返 回</el-button></div></el-dialog>
</template><script>
import VideoList from "./components-demo/VideoList";
import CyberPlayer from "./components-demo/CyberPlayer";
import config from "../../static/config";//config是自定义的ip这个可自行定义，或者固定写死
import _ from "underscore";//这里用了Underscore.js，可以改用为用js
export default {name: "PlanVideoInspectionDialog",props: {id: String,},components: {CyberPlayer,VideoList},data() {return {videoList: [],playlist: [],playlistIf: true,storageApi: config.storage.ip,//可以写死ipindexNum: null,tagStartTime: null,playerObj: null,activeListName: "splb",selItemId: "",};},computed: {},created() {},mounted() {this.init();},methods: {init() {this.getVideoList();},handleJbxxClick() {this.playerObj = this.$refs.player.player;},dialogVideoBtn() {this.init();},getVideoList() {let sources = [{ file: "" }];this.$api.getVideoList().then((response) => {// this.listLoading = true;this.videoList = response;//接口返回的数据类型//this.videoList = [{//"deviceCode":"3745646546546000",//"videoName":"20221017.mp4",//"startTime":"2022-10-17 16:11:53",//"endTime":"2022-10-17 16:12:07",//"videoTime":"0分钟14秒",//"videoLocation":"/Files/Videos/20221013/20221017.mp4",//"attribute":"有效",//"qualifiedState":"合格",//"noQualifiedRemark":null,//"videoType":"任务视频",//"deviceName":null,//"id":"3a06e29b-e49d-0445-0c87-692f9691d80a"//},]//这里是拼接百度播放器需要的数据格式for (let i = 0; i < this.videoList.length; i++) {sources = [{file:""}];sources[0].file = this.storageApi + this.videoList[i].videoLocation;this.playlist.push({sources: sources,title: this.videoList[i].videoName,id: this.videoList[i].id,//非必要，是我要做业务需求的id，tracks: [{ begin: 9.5, end: 10.5, text: "我的信息1" }, // 缩略图配置文件],});}//这里这么写是因为如果接口没有返回值的情况，会显示不出播放器，所以给了一个默认值为空this.playlist =response.length > 0? [...this.playlist]: [{ sources: [{ file: "" }], title: "" }];this.playlistIf = true;console.log(this.playlist)});},dialogShowBtn() {this.$emit("onClose");},//获取打点位置，这里如果没有在视频播放条设置打点信息，可以忽略getVideoBreakRules(item) {var that = this;var playInfo = {};this.selItemId = item.id;let params = {videoId: item.id,taskId: that.id,};this.playerObj = this.$refs.player.player;this.$api.getVideoBreakRules(params).then((response) => {var thumbnails = [];var cues = []; //缩略图,打点信息if (response && response.length > 0) {_.each(response, function (obj) {var t = {begin: obj.tagStartTime,end: obj.tagStartTime + 3,text: "/File/GetThumbnailPicture?id=" + obj.imageId,};thumbnails.push(t);var c = {begin: obj.tagStartTime,end: obj.tagStartTime + 3,text: obj.breakRulesName,};cues.push(c);});playInfo = {thumbnails: thumbnails,cues: cues,};this.$refs.player.setInfo(playInfo);}});},handleClick(tab, event) {this.$refs.player.screenshot();},onScreenshot(data) {//this.otherParameter = {//taskId: this.id,//dayPlanTaskId: this.moldId,//tagStartTime: data.tagStartTime,//videoId: data.videoId,//supervisionTaskId: this.id,//base64: data.base64,//type: "dcjh",//};},},
};
</script><style lang="scss" scoped>
::v-deep .el-dialog {margin-top: 4vh !important;
}
::v-deep .el-dialog__body {padding: 20px;
}
.dialog-footer {padding-top: 20px;text-align: right;border-top: solid #eee 1px;
}
.mtxt {text-indent: 10px;color: #333;border-left: 3px solid #1890ff;font-size: 16px;font-weight: bold;margin: 0 0 10px 0;font-family: Microsoft YaHei-Bold, Microsoft YaHei;
}
</style>

VideoList.vue

<template><el-tableref="table"row-key="id":data="videoList"size="small"style="width: 100%"height="350":row-style="isRed"border><el-table-columnlabel="视频名称"prop="videoName"align="left"width="280":show-overflow-tooltip="true"></el-table-column><el-table-columnlabel="视频有效性"prop="attribute"align="left"width="120"></el-table-column><el-table-columnlabel="开始录制时间"prop="startTime"align="left"width="160":show-overflow-tooltip="true"></el-table-column><el-table-columnlabel="结束录制时间"prop="endTime"align="left"width="160":show-overflow-tooltip="true"></el-table-column><el-table-columnlabel="视频时长"prop="videoTime"align="left"width="160"></el-table-column><el-table-columnlabel="视频类型"prop="videoType"align="left"width="120"></el-table-column><el-table-columnlabel="拍摄设备"prop="deviceName"align="left"width="220"></el-table-column><el-table-columnlabel="合格状态"prop="qualifiedState"align="left"width="120"></el-table-column><el-table-columnlabel="合格备注"prop="noQualifiedRemark"align="left"width="220"></el-table-column><el-table-column label="操作" align="center" width="180" fixed="right"><template slot-scope="{ row }"><el-button type="text" size="small" @click="onClickAppeal(row)">下载</el-button><el-button type="text" size="small" @click="onClickPlay(row)">点播</el-button><!-- <el-button type="text" size="small" @click="onClickDetail(row)">设为无效</el-button> --></template></el-table-column></el-table>
</template>
<script>
// import config from "../../../../../static/config";
export default {props:{videoList: Array,playerObj: Object,storageApi: String,selItemId: String},data() {return{selectedArrData: [], lineId: "",//  storageApi: config.storage.ip,}},created() {this.lineId = this.selItemId},mounted() {},methods:{//下载onClickAppeal(record) {// debuggerlet url = this.storageApi + record.videoLocation;//跳过浏览直接下载fetch(url).then(res => res.blob()).then(blob => {const a = document.createElement("a");const objectUrl = window.URL.createObjectURL(blob);a.download = record.videoName;a.href = objectUrl;a.click();window.URL.revokeObjectURL(objectUrl);})},//列表点播onClickPlay(row) {let indexNum = nullthis.lineId = row.idthis.videoList.forEach((item,index) => {if(item.id == row.id) {indexNum = index}})this.playerObj.playlistItem(indexNum);},//列表点播选中高亮isRed({ row }) {const checkIdList = [this.lineId]if (checkIdList.includes(row.id)) {return {backgroundColor: "#46a6ff",// color:"#fff"};}},}};</script>

实现的代码就这么多，只做参考。主要代码可以当做组件直接引用到项目，但是主要业务还是需要根据自己需求来，如果没有效果多调试下。希望能帮组到有需要的你，共同学习共同成长，创作不易，如果觉得有所帮助，那就动动小手指给小编一个小小的赞，那就非常感谢。

VUE2使用使用百度视频播放器实现视频点播相关推荐

视频点播系统,视频播放器,在线视频点播学习系统毕业设计
项目背景和意义目的:本课题主要目标是设计并能够实现一个基于java的视频点播系统,系统整体使用了基于浏览的java+MySql的B/S架构,技术上使用了基于java的springboot框架:使用浏 ...
android音视频播放器开发百度云,Android 播放端 SDK
1 概述 PLDroidPlayer 是一个适用于 Android 平台的音视频播放器 SDK,可高度定制化和二次开发,为 Android 开发者提供了简单.快捷的接口,帮助开发者在 Android ...
学习总结-Cyberplayer视频播放器移动端手机百度打开全屏问题探究
[最新版本的已经修复屏蔽了双击]移步https://bce.bdstatic.com/jwplayer/4.1.6.1/cyberplayer.js [问题背景] 移动端h5页面使用了Cyberpla ...
基于百度云播放器开发的视频播放软件
之前说过了,最近在研究视频直播这块,前一篇文件粗略的研究了ijkplayer的开发,也写了一个小demo,现在打算去研究国内百度提供的百度云播放器. 首先去下了一个百度云播放器的sdk,网址如下:ht ...
android 播放器素材,【图片】【Android SurfaceView】视频播放器简单例子_二次元的程序员吧_百度贴吧...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 1.TestVedioActivity.Java package com.open_open.android_ch14_2; import android ...
Hls.js播放m3u8视频 DPlayer视频播放器（easypan） MSE简介
文章目录学习链接 hls.js播放m3u8视频效果代码前端代码安装hls.js App.vue 后台代码准备文件 mp4文件切片java实现 TsController TsService ...
【分享】分享一款不错的网页视频播放器
作为一名前端开发,在做页面时会碰到视频展示,一般都是用 flash 加载视频源文件,可惜功能太少,而且支持的视频格式有限.下面给大家分享一款不错的视频播放器--ckplayer(超酷网页视频播放器). ...
WPF技术触屏上的应用系列（三）: 视频播放器的使用及视频播放、播放、暂停、可拖动播放进度效果实现...
WPF技术触屏上的应用系列(三): 视频播放器的使用及视频播放.播放.暂停.可拖动播放进度效果实现原文:WPF技术触屏上的应用系列(三): 视频播放器的使用及视频播放.播放.暂停.可拖动播放进度效果 ...
android视频播放器api,03.视频播放器Api说明
03.视频播放器Api说明目录介绍01.最简单的播放 02.如何切换视频内核 03.切换视频模式 04.切换视频清晰度 05.视频播放监听 06.列表中播放处理 07.悬浮窗口播放 08.其他重要功 ...