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

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值