提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
vue 项目中使用百度播放组件的方法记录
一、项目描述
前端项目需要接入实时监控视频,所以找到两款播放插件liveplayer 和 cyberplayer
二、为什么选择百度播放组件 cyberplayer
liverplayer 最先被使用 但最后连接测试监控时前端发生跨域报错(目前还没找到方法解决) ,所以选择使用百度的播放组件
二、使用步骤
1.下载百度播放组件
https://cloud.baidu.com/doc/Developer/index.html#.E6.92.AD.E6.94.BE.E5.99.A8.20Web.20SDK
点击上方链接,本人选择的是播放器 Web SDK(网页最下方)
先打开开发者工具 切换到控制台,(直接点击下载无反应的)点击下载会出现报错,然后点击报错信息中的网址就能下载成功。
2.解压下载的文件并引入vue项目中
- 将解压的文件夹中player文件夹放入项目根目录下public文件里
2.打开index.html 文件 将player文件夹中cyberplayer.js文件引入
<script src="<%= BASE_URL %>player/cyberplayer.js"></script>
3.创建一个js文件来封装播放组件使用方法
/*
idName 获取放入组件的标签元素id名称
video_url 视频地址
pic 预览图地址
*/
function playVideo (idName,video_url,pic){
const player = cyberplayer(idName).setup({
width: 245, // 宽度,也可以支持百分比(不过父元素宽度要有)
height: 200, // 高度,也可以支持百分比
title: "监控视频", // 标题
file: video_url, // 播放地址
image: pic, // 预览图
autostart: false, // 是否自动播放
stretching: "uniform", // 拉伸设置
repeat: false, // 是否重复播放
volume: 100, // 音量
controls: true, // controlbar是否显示
starttime: 0, // 视频开始播放时间点(单位s),如果不设置,则可以从上次播放时间点续播
logo: { // logo设置
linktarget: "_blank",
margin: 8,
hide: false,
position: "top-right", // 位置
file: "./img/logo.png" // 图片地址
},
ak: "xxxxxxx" // 公有云平台注册即可获得accessKey 密钥可自行申请
});
return player
}
export default playVideo
//以下为百度播放demo的视频和预览图地址
//http://cyberplayer.bcelive.com/videoworks/mdakbuhu4wqdi08dwix/cyberplayer/mp4/cyberplayer-demo.mp4
// http://cyberplayer.bcelive.com/thumbnail.jpg
4.页面使用封装好的方法
<template>
//创建一个放入播放组件的容器
<div id="playercontainer"></div>
</template>
<script>
//引入封装好的js文件
import playVideo from "@/assets/js/playVideo";
export default {
mounted() {
const videoUrl = "http://cmgw-vpc.lechange.com:8888/LCO/6C0735CPAZ98561/0/1/20210528T073915/0c4ac2342dad9fd86b90e9b926cb0dd6.m3u8";
const picUrl = "http://cyberplayer.bcelive.com/thumbnail.jpg";
//将容器的id名 视频地址 预览图地址 传入方法中
playVideo("playercontainer", videoUrl, picUrl);
},
};
3.最终效果图