- 下载资源先:
https://cloud.baidu.com/doc/Developer/index.html
点击上面的链接,然后滚动到底部,然后在这下载此sdk
- 解压以下文件出来放到public文件夹中的play文件夹
- 在index.html引入对应的资源,如图:
- 然后我直接封装了组件形式了,到时候你使用props传参数进来就好了,直接贴代码了。
<template>
<!-- 百度云 -->
<div class="Bvideo">
<div :id="objVideoData.id" class="playercontainer"></div>
</div>
</template>
<script>
export default {
props:{
objVideoData:{
type:Object,
default:function(){
return {}
}
}
},
data(){
return {
player:null, //存的数据
}
},
mounted() {
this.getVideoFn();
},
methods:{
getVideoFn(){
this.player = cyberplayer(this.objVideoData.idName).setup({
width: '100%', // 宽度,也可以支持百分比(不过父元素宽度要有)
height: '100%', // 高度,也可以支持百分比
title: "", // 标题
isLive: true, // 必须设置,表明是直播视频
//file:'http://cyberplayer.bcelive.com/videoworks/mda-kbuhu4wqdi08dwix/cyberplayer/mp4/cyberplayer-demo.mp4',
file: this.objVideoData.url, // 播放地址
image: 'http://cyberplayer.bcelive.com/thumbnail.jpg', // 预览图
autostart: true, // 是否自动播放
stretching: "uniform", // 拉伸设置
repeat: false, // 是否重复播放
volume: 0, // 音量
controls: true, // controlbar是否显示
starttime: 0, // 视频开始播放时间点(单位s),如果不设置,则可以从上次播放时间点续播
hls: {
reconnecttime: 8 // hls直播重连间隔秒数
},
ak: "306985be4a9b4***" // 公有云平台注册即可获得accessKey 密钥可自行申请
});
}
},
watch:{
objVideoData(newVal,oldVal){
if(newVal){
this.getVideoFn();
}
}
},
destroyed(){
this.player.pause(); //暂停
this.player.remove(); //删除
}
}
</script>
<style lang="less" scoped>
.Bvideo{
width: 100%;
height:100%;
}
</style>
官方的demo:demo