阿里云视频播放器整合与学习

1、根据视频地址播放

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" />
    <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js"></script>
    <div  class="prism-player" id="J_prismPlayer"></div>

    <script>
        var player = new Aliplayer({
            id: 'J_prismPlayer',
            width: '100%',
            autoplay: false,
            cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',  
            //播放配置
            source : 'https://outin-330daf7945c511eab0c600163e1c35d5.oss-cn-shanghai.aliyuncs.com/sv/20bd2acc-1730b0b8921/20bd2acc-1730b0b8921.mp4?Expires=1594019827&OSSAccessKeyId=LTAI3DkxtsbUyNYV&Signature=IaW3gDBLw%2Fk0%2FHHf4lVyu2Fu8YU%3D',
        },function(player){
            console.log('播放器创建好了。')
        });
    </script>

</body>

</htm

l>

2 根据播放凭证播放

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" />
    <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js"></script>
    <div class="prism-player" id="J_prismPlayer"></div>

    <script>
        var player = new Aliplayer({
            id: 'J_prismPlayer',
            width: '100%',
            autoplay: false,
            cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
            //播放配置
            encryptType: '1',//如果播放加密视频,则需设置encryptType=1,非加密视频无需设置此项
            vid: '52d80ae859244bdc8275fce9a6a3ee52',
            playauth: 'eyJTZWN1cml0eVRva2VuIjoiQ0FJUzN3SjFxNkZ0NUIyeWZTaklyNWVNTCtMc25ZY1l6YlNFWVVqVG9FRWhXTXA4aEliTXR6ejJJSDFFZm5sb0FPa2FzUHd6bFd0UjZmd2Vsck1xRk1BZUZCMlpOSkVxc2NzR3JGdnhKcExGc3QySjZyOEpqc1ZGbm9wajBWaXBzdlhKYXNEVkVma3VFNVhFTWlJNS8wMGU2TC8rY2lyWVhEN0JHSmFWaUpsaFE4MEtWdzJqRjFSdkQ4dFhJUTBRazYxOUszemRaOW1nTGlidWkzdnhDa1J2MkhCaWptOHR4cW1qL015UTV4MzFpMXYweStCM3dZSHRPY3FjYThCOU1ZMVdUc3Uxdm9oemFyR1Q2Q3BaK2psTStxQVU2cWxZNG1YcnM5cUhFa0ZOd0JpWFNaMjJsT2RpTndoa2ZLTTNOcmRacGZ6bjc1MUN0L2ZVaXA3OHhtUW1YNGdYY1Z5R0ZOLzhtNU9aUXJ6emFveGdMT2VxQVJtWGpJRFRiS3VTbWhnL2ZIY1dPRGxOZjljY01YSnFBWFF1TUdxSGV2WDNvQW1UUGxuN0YvbmVpZjVzallBSjVsSHA3TWVNR1YrRGVMeVF5aDBFSWFVN2EwNDRrTUNrS3I4Y3NNUWFnQUZNSUNHMlVWVUZHR3JpWHRNMDROMit3S3c4QTlGcGpNZlFVdkMrUjhQMmFQSXdHYWlxMzBUZTliUHIvMTg1VlRXUkhCNHpOV2VDU0YxQzJxNmRydXdhNnh6M01ONUwybFFDY2p2bjdEcExPSHFJcW9JRklva1VUMXVnRDBaaFBLaG1Kb1kyZjJGUVNkMlZ3bFBCV2NjTExEeEh4ckMyb1RoTkRVb1lFL2JEZVE9PSIsIkF1dGhJbmZvIjoie1wiQ0lcIjpcIm42VTRpdm9URENRcVRoT3I1bDI4WWdwZk8rdERBclJaTkhNenpqVDUvZ1grQVJDaElHTVpNZk9iZTlhZ1JHRHdcXHJcXG5cIixcIkNhbGxlclwiOlwiTWgyT3Vpb3VWYjJpNnRUU3RrQzV4ZVZxMkVIQS9ybkRZR2lRQUMrTjRHbz1cXHJcXG5cIixcIkV4cGlyZVRpbWVcIjpcIjIwMjAtMDctMDZUMDY6MjU6NDdaXCIsXCJNZWRpYUlkXCI6XCI1MmQ4MGFlODU5MjQ0YmRjODI3NWZjZTlhNmEzZWU1MlwiLFwiU2lnbmF0dXJlXCI6XCJOb29VN3gwRS8yL1BSOEpPUFpFS1F3amRBSVE9XCJ9IiwiVmlkZW9NZXRhIjp7IlN0YXR1cyI6Ik5vcm1hbCIsIlZpZGVvSWQiOiI1MmQ4MGFlODU5MjQ0YmRjODI3NWZjZTlhNmEzZWU1MiIsIlRpdGxlIjoiNiAtIFdoYXQgSWYgSSBXYW50IHRvIE1vdmUgRmFzdGVyIiwiQ292ZXJVUkwiOiJodHRwOi8vb3V0aW4tMzMwZGFmNzk0NWM1MTFlYWIwYzYwMDE2M2UxYzM1ZDUub3NzLWNuLXNoYW5naGFpLmFsaXl1bmNzLmNvbS81MmQ4MGFlODU5MjQ0YmRjODI3NWZjZTlhNmEzZWU1Mi9zbmFwc2hvdHMvZjJlN2M0ZWQ4ZTE5NGI2OWJhMmJhZmIyYmM5ZDQwMmYtMDAwMDEuanBnP0V4cGlyZXM9MTU5NDAyMDI0NyZPU1NBY2Nlc3NLZXlJZD1MVEFJM0RreHRzYlV5TllWJlNpZ25hdHVyZT12eXJ0WFV6cEt6OFR3YVRxMTQ5bXlYVnFjRU0lM0QiLCJEdXJhdGlvbiI6MTYuMjc2N30sIkFjY2Vzc0tleUlkIjoiU1RTLk5UOWRYWHBYOXp2b2NuYkRBdFRFUGtDZ1UiLCJBY2Nlc3NLZXlTZWNyZXQiOiI0VVJWd3NmZENhWUhhNTRoRHNEbkthZEc4NExTQkZSMU52WEVFRktGdjk0SyIsIlJlZ2lvbiI6ImNuLXNoYW5naGFpIiwiQ3VzdG9tZXJJZCI6MTc3Mzk5NTEyMjc3OTUwOH0=',
        }, function (player) {
            console.log('播放器创建好了。')
        });
    </script>

</body>

</html>

3、视频播放凭证有时效,默认时长100秒

java 复制代码
//播放凭证有过期时间,默认值:100秒 。取值范围:100~3000。
//request.setAuthInfoTimeout(200L);
相关推荐
毕设源码-赖学姐26 分钟前
【开题答辩全过程】以 非凡物流公司电商物流管理系统的设计与实现为例,包含答辩的问题和答案
java·eclipse
千里码aicood28 分钟前
springboot+vue考研复习交流平台设计(源码+文档+调试+基础修改+答疑)
vue.js·spring boot·后端
菠菠萝宝1 小时前
【Java手搓RAGFlow】-3- 用户认证与权限管理
java·开发语言·人工智能·llm·openai·qwen·rag
csdn_wuwt3 小时前
前后端中Dto是什么意思?
开发语言·网络·后端·安全·前端框架·开发
print(未来)3 小时前
C++ 与 C# 的性能比较:选择合适的语言进行高效开发
java·开发语言
JosieBook3 小时前
【Rust】 基于Rust 从零构建一个本地 RSS 阅读器
开发语言·后端·rust
王者之座5 小时前
java+maven配置yguard的一次实验
java·spring boot·maven
努力的小郑7 小时前
今晚Cloudflare一哆嗦,我的加班计划全泡汤
前端·后端·程序员
百***61877 小时前
springboot整合mybatis-plus(保姆教学) 及搭建项目
spring boot·后端·mybatis