[JavaScript知识库]vue项目 使用百度云 cyberplayer.js插件方法

1. 下载资源先：
   https://cloud.baidu.com/doc/Developer/index.html
   点击上面的链接，然后滚动到底部，然后在这下载此sdk
   
2. 解压以下文件出来放到public文件夹中的play文件夹
   
   
3. 在index.html引入对应的资源,如图:
   
4. 然后我直接封装了组件形式了，到时候你使用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