首页

阿里云视频点播


<script src="/static/mui.min.js"></script>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8"
    src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
<div id="player-con"></div>
<script>
    function ajax(url, data) {
        return new Promise((resolve, reject) => {
            mui.get(url, data, function (data) {
                resolve(data)
            })
        })
    }

    // const ip = 'https://127.0.0.1'
    const ip = ''

    ajax(ip + '/ali/voc/GetPlayInfo', { VideoId: 'a47afa8a1b424a2d91579edbf38df7f0' })
        .then(r => {
            var player = new Aliplayer({
                "id": "player-con",
                "source": r.body.PlayURL,
                "width": "100%",
                "height": "500px",
                "autoplay": true,
                "isLive": false,
                "rePlay": false,
                "playsinline": true,
                "preload": true,
                "controlBarVisibility": "hover",
                "useH5Prism": true
            }, function (player) {
                console.log("播放器创建了。");
            });
        })

</script>

视频上传

<script src="./res/ali-upload-sdk-1.5.0/lib/es6-promise.min.js"></script>
<script src="./res/ali-upload-sdk-1.5.0/lib/aliyun-oss-sdk-5.3.1.min.js"></script>
<script src="./res/ali-upload-sdk-1.5.0/aliyun-upload-sdk-1.5.0.min.js"></script>
<script>
    var uploader = new AliyunUpload.Vod({
        //阿里账号ID,必须有值 ,值的来源https://help.aliyun.com/knowledge_detail/37196.html
        userId: "122",
        //上传到点播的地域, 默认值为'cn-shanghai',//eu-central-1,ap-southeast-1
        region: "",
        //分片大小默认1M,不能小于100K
        partSize: 1048576,
        //并行上传分片个数,默认5
        parallel: 5,
        //网络原因失败时,重新上传次数,默认为3
        retryCount: 3,
        //网络原因失败时,重新上传间隔时间,默认为2秒
        retryDuration: 2,
        // 开始上传
        'onUploadstarted': async function (uploadInfo) {
            console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
            //上传方式1, 需要根据uploadInfo.videoId是否有值,调用点播的不同接口获取uploadauth和uploadAddress,如果videoId有值,调用刷新视频上传凭证接口,否则调用创建视频上传凭证接口
            let data
            if (uploadInfo.videoId) {
                // 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
                data = await ajax(ip + '/ali/voc/RefreshUploadVideo', { VideoId: uploadInfo.videoId })
            }
            else {// 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
                data = await ajax(ip + '/ali/voc/CreateUploadVideo', { Title: uploadInfo.file.name, FileName: uploadInfo.file.name })
            }
            //从点播服务获取的uploadAuth、uploadAddress和videoId,设置到SDK里
            console.log(data, uploadInfo, data.body.uploadAuth, data.body.uploadAddress, data.body.videoId)
            uploader.setUploadAuthAndAddress(uploadInfo, data.body.UploadAuth, data.body.UploadAddress, data.body.VideoId);

        },
        // 文件上传成功
        'onUploadSucceed': function (uploadInfo) {
            console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
        },
        // 文件上传失败
        'onUploadFailed': function (uploadInfo, code, message) {
            console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
        },
        // 文件上传进度,单位:字节
        'onUploadProgress': function (uploadInfo, totalSize, loadedPercent) {
            console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(loadedPercent * 100) + "%");
        },
        // 上传凭证超时
        'onUploadTokenExpired': function (uploadInfo) {
            console.log("onUploadTokenExpired");
            //实现时,根据uploadInfo.videoId调用刷新视频上传凭证接口重新获取UploadAuth
            //https://help.aliyun.com/document_detail/55408.html
            //从点播服务刷新的uploadAuth,设置到SDK里
            uploader.resumeUploadWithAuth(uploadAuth);
        },
        //全部文件上传结束
        'onUploadEnd': function (uploadInfo) {
            console.log("onUploadEnd: uploaded all the files");
        }
    });
</script>

<form action="">
    <input type="file" name="file" id="files" multiple />
</form>
<script>
    userData = '';
    document.getElementById("files")
        .addEventListener('change', function (event) {
            for (var i = 0; i < event.target.files.length; i++) {
                // 逻辑代码
                uploader.addFile(event.target.files[i], null, null, null, userData);

                uploader.startUpload();
            }
        });
</script>