初探 阿里云 web 播放器

阿里云web播放器地址：https://www.alibabacloud.com/help/zh/doc-detail/125570.htm?spm=a2c63.p38356.879954.6.551811f0xFOj90

集成文档：https://www.alibabacloud.com/help/zh/doc-detail/125570.htm?spm=a2c63.p38356.879954.29.56566e21Xaltel

demo以及文档：http://player.alicdn.com

 写一个小demo

先引入sdk

<!-- aliplayer -->
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
<!-- aliplayer -->
    <script src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js" charset="utf-8"></script>

在页面中放个容器

<div  class="prism-player" id="J_prismPlayer"></div>

创建播放器实例

let self=this;
        self.player=new Aliplayer({
            id: 'J_prismPlayer',
             '100%',
            height:'100%',
            isLive:false,//直播时
            autoplay: true,
            //支持播放地址播放,此播放优先级最高
　　　　　　　//https://p2.weizan.cn/208194514/253953290439825264/live.m3u8　

            source : 'https://vdept.bdstatic.com/79505936316e694e4a63544c5a76744e/43656c77754e7050/646f1065a3db9819895ced16437ece5854d1adee18e9708475ff5c09e3e920b33cc01b0c716ee28bee801f6b610fb1f4.mp4?auth_key=1590319673-0-0-de017814a7b3eb2d5424af78dd5414db'
        },function(player){
            console.log('播放器创建好了。')
        });

 中央电视台 直播流： http://ivi.bupt.edu.cn/hls/cctv10.m3u8

 封装一个 用于点播的组件：

<template>
    <div class="bcd">
        <div  class="prism-player" id="J_prismPlayer"></div>
    </div>
</template>

<script>
export default {
    props: {
        playData: {
            type: Object,
            default: function(){
               return {}
            }
        },
        videoPlayType: {
            type: Boolean,
            default: false
        }
    },
    data(){
        return{
            AliPlayer: null, //阿里云播放器,
            errTipsStatus: false, //是否显示错误提示层
            errTips: '加载中...',
        }
    },
    created() {
        console.log(this.playData)
    },
    mounted() {
        this.videoInit();
    },
    methods: {
        videoInit(){
        //视频初始化
            this.playConfig();
        },
        playConfig() {
        //播放器配置
            let that = this, data = this.playData;
            that.AliPlayer = new Aliplayer({
                    id: 'J_prismPlayer',
                     '100%',
                    height:'100%',
                    autoplay: true,
                    //支持播放地址播放,此播放优先级最高
                    // //player.alicdn.com/video/aliyunmedia.mp4
                    // data.playAddress
                    source : data.playAddress,
                    cover : data.posterUrl,
            },function(player){
                player.on("play",()=>{
                    that.$emit("videoStart")
                })
                player.on("pause",()=>{
                    that.$emit("videoEnd")
                })
           });
        },
        
    },
    beforeDestroy() {
        this.$emit("videoEnd")
        this.AliPlayer.dispose();
    },
}
</script>

<style lang="scss" scoped>
.bcd{
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index: 2;
    overflow: hidden;
    .prism-player{
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
    }
}
</style>

。