Aliplayer视频点播加密播放

最新推荐文章于 2024-09-13 21:40:25 发布

awba4090

最新推荐文章于 2024-09-13 21:40:25 发布

阅读量2.1k

点赞数

文章标签： javascript 移动开发测试 ViewUI

原文链接：http://www.cnblogs.com/zxk5211/p/web_18.html

版权

Aliplayer视频播放器填坑

aliplayer视频点播分为Flash和HTML5两个版本，移动端不支持Flash播放器。
Flash播放器兼容IE8+，HTML5播发器支持比较新的浏览器，对浏览器的版本要求较Flash播放器对浏览器的版本的要求要高一些。
其中：
h5播放器在移动端不支持flv和rtmp的播放
播放flv、m3u8视频，PC端支持的浏览器，需要启用允许跨域访问

HLS标准加密与MPS私有加密对比

加密类型/设备环境	iOS	Android	PC
标准加密 HLS	√	√	Chrome Firefox Safari Edge IE 11+for Windows8.1+
私有加密 MPS	×	Chrome for Android	Chrome Firefox Safari Edge IE 11+for Windows8.1+

Aliplayer播放器Demo

注：Aliplayer在线配置网址
HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>用户测试用例</title>
        <!-- aliplayer样式表 -->
        <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
        <!-- aliplayer Flash版&HTML5版 -->
        <script src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js" type="text/javascript" charset="utf-8"></script>
        <!-- Flash版 -->
        <script src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-flash-min.js" type="text/javascript" charset="utf-8"></script>
        <!-- HTML5版 -->
        <script src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-h5-min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="prism-player" id="J_prismPlayer"></div>
    </body>
</html>

JavaScript代码：

var player = new Aliplayer({
    id: 'J_prismPlayer',
    width: '100%',
    autoplay: true,
    //支持播放地址播放,此播放优先级最高
    source: '播放url',
    
    //播放方式二：点播用户推荐
    vid: '',
    playauth: 'ddd',
    cover: 'logo.png',
    
    //播放方式三：仅MPS用户使用（私有加密播放）
    vid: '',
    accId: 'dd',
    accSecret: 'dd',
    stsToken: 'dd',
    domainRegion: 'dd',
    authInfo: 'dd',
    
    //播放方式四：使用STS方式播放
    vid: '',
    accessKeyId: 'dd',
    securityToken: 'dd',
    accessKeySecret: 'dd',
    region: 'cn-shanghai',
}, function(player) {
    console.log('播放器创建好了。')
});

注：aliplayer属性和接口使用说明

Vue中使用Aliplayer播发器

注：现在index.html中引入aliplayer的css和js，或者在当前vue文件中引入aliplayer的css和js。

<template>
  ...
  <!-- 引入aliplayer播放器 -->
  <div class="prism-player" id="player-con"></div>
  ...
</template>

初始化aliplayer播发器

export default {
    data() {
        return {
            player: {},
            timer: null
        };
    },
    created() {
        this.loading = this.$loading({
            background: "rgba(0, 0, 0, 0.5)",
            text: "拼命加载中"
        });
    },
    methods: {
        // 销毁和重建aliplayer
        changePlayer(dt) {
            this.player.dispose();
            this.initPlayer(dt);
        },
        // 获取视频播放信息
        getKeyInfo(videoId, flag) {
            this.$axios.post(
                "XXXXXToken",
                qs.stringify({
                    videoId
                })
            ).then(res => {
                let data = res.data;
                if (data.code == 1) {
                    let dt = data.result_data;
                    // 是否初次创建？初次创建播放器：销毁和重建播发器
                    flag ? this.initPlayer(dt) : this.changePlayer(dt);
                }
            });
        },
        // 初始化视频播放器
        initPlayer(data) {
            // 清空dom节点
            document.getElementById("player-con").innerHTML = "";
            // 改变this指向，使其指向当前this指向。
            let _this = this,
                token = sessionStorage.getItem("token"),
                userId = sessionStorage.getItem("userId"),
                isConfirm = sessionStorage.getItem("isConfirm");
            this.player = new Aliplayer({
                    id: "player-con", // 播放器id
                    format: "m3u8", // 视频格式
                    width: "100%",
                    height: "450px",
                    playsinline: true,
                    preload: true,
                    encryptType: 1,
                    // HLS标准加密为0（默认）,MPS私有视频加密为1
                    controlBarVisibility: "always",
                    useH5Prism: true,
                    // 视频底部状态工具栏设置，默认为false，全显示
                    skinLayout: [{
                            name: "bigPlayButton",
                            align: "blabs",
                            x: 30,
                            y: 80
                        },
                        {
                            name: "H5Loading",
                            align: "cc"
                        },
                        {
                            name: "errorDisplay",
                            align: "tlabs",
                            x: 0,
                            y: 0
                        },
                        {
                            name: "infoDisplay"
                        },
                        {
                            name: "tooltip",
                            align: "blabs",
                            x: 0,
                            y: 56
                        },
                        {
                            name: "thumbnail"
                        },
                        {
                            name: "controlBar",
                            align: "blabs",
                            x: 0,
                            y: 0,
                            children: [{
                                    name: "progress",
                                    align: "blabs",
                                    x: 0,
                                    y: 44
                                },
                                {
                                    name: "playButton",
                                    align: "tl",
                                    x: 15,
                                    y: 12
                                },
                                {
                                    name: "timeDisplay",
                                    align: "tl",
                                    x: 10,
                                    y: 7
                                },
                                {
                                    name: "fullScreenButton",
                                    align: "tr",
                                    x: 10,
                                    y: 12
                                },
                                {
                                    name: "volume",
                                    align: "tr",
                                    x: 5,
                                    y: 10
                                }
                            ]
                        }
                    ],
                    // MPS
                    vid: 'vid',
                    accId: 'accId',
                    accSecret: 'accSecret',
                    stsToken: 'stsToken',
                    domainRegion: "cn-beijing",
                    authInfo: '{"ExpireTime": "' +
                        expireTime +
                        '","MediaId": "' +
                        videoId +
                        '","Signature": "' +
                        signature +
                        '"}'
                },
                function(player) {
                    // html5版本的视频事件写在当前callback中
                    player.play();

                    // 定时器
                    let clear = () => {
                        if (_this.timer) {
                            clearTimeout(_this.timer);
                            _this.timer = null;
                        }
                    };

                    // 获取播放时间
                    let getTimes = () => {
                        if (player.getCurrentTime() >= 60) {
                            if (isConfirm == 0) {
                                player.pause();
                                player.fullscreenService.cancelFullScreen();
                            }
                        }
                        // 递归回调，计算播放时间
                        _this.timer = setTimeout(getTimes, 1000);
                    };

                    player.on("ready", function(e) {
                        // 首次播放
                        clear();
                        getTimes();
                        player.on("play", function(e) {
                            // 播放视频
                            clear();
                            getTimes();
                        });
                        player.on("pause", function(e) {
                            // 暂停视频播放
                            clear();
                        });
                        player.on("ended", function(e) {
                            // 视频播放结束
                            clear();
                        });
                        player.on("error", function(e) {
                            // 视频播放失败
                            clear();
                        });
                    });
                }
            );
        },
        // 切换视频播放源：使用函数截流，防止多次触发影响数据展示
        switchVideo: Debounce(function(index, videoId, isPerchase) {
            this.mark = index;
            this.getKeyInfo(videoId);
            this.isPerchase = isPerchase == undefined ? true : isPerchase;
        }, 500)
    },
    // 生命周期钩子函数：销毁
    destroyed() {
        // 清除定时器
        clearInterval(this.timer);
        this.timer = null;
        let play = this.player,
            len = Object.keys(play);
        if (!len) return;
        // 销毁播放器
        play.dispose();
    }
};

注：播放器中隐藏了画中画、画质切换、视频下载等功能。
同时需要注意的是，aliplayerH5视频点播在iOS移动端是不支持的，苹果移动端不支持aliplayer的私有加密播放方式！

转载于:https://www.cnblogs.com/zxk5211/p/web_18.html