阿里视频云点播端体验Demo

最新推荐文章于 2024-08-07 09:07:02 发布

视频砖家

最新推荐文章于 2024-08-07 09:07:02 发布

阅读量595

点赞数

分类专栏：阿里云文章标签：阿里视频云点播阿里云点播阿里云点播demo

本文链接：https://blog.csdn.net/suny2020/article/details/120214575

版权

阿里云专栏收录该内容

2 篇文章 0 订阅

订阅专栏

阿里视频云点播端云一体化体验Demo是视频云全链路（端到云到端）的最佳实践，主要包含短视频、播放器和上传的全链路演示。体验Demo提供完整的产品级的交互UI和业务源码，帮助开发者快速实现业务需求，节约开发时间和成本。

支持格式

Web端播放器SDK，同时支持Flash和H5两种播放技术。

Flash模式（已停止更新）：
- 视频格式：MP4、FLV、M3U8、RTMP
- 视频编码：H.264
- 音频编码：AAC、MP3
- 音频格式：MP3
H5模式：
- 视频格式：MP4、FLV、M3U8
- 视频编码：H.264
- 音频编码：AAC
- 音频格式：MP3

<!DOCTYPE html>
<html>
    <head>
     <meta charset="UTF-8">
     <meta name="viewport"   content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
     <title>用户测试用例</title>
     <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.11/skins/default/aliplayer-min.css" />
     <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.11/aliplayer-min.js"></script>
    </head>
    <body>
        <div  class="prism-player" id="J_prismPlayer"></div>
        <script>
            var player = new Aliplayer({
            id: 'J_prismPlayer',
            width: '100%',
            autoplay: true,
            //支持播放地址播放,此播放优先级最高
            source : '播放url',
            //播放方式二：推荐点播用户使用
            vid : '1e067a2831b641db90d570b6480fbc40',
            playauth : 'ddd',
            cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
            encryptType:1, //当播放私有加密流时需要设置。
            //播放方式三：仅MPS用户使用
            vid : '1e067a2831b641db90d570b6480fbc40',
            accId: 'dd',
            accSecret: 'dd',
            stsToken: 'dd',
            domainRegion: 'dd',
            authInfo: 'dd',
            //播放方式四：使用STS方式播放
            vid : '1e067a2831b641db90d570b6480fbc40',
            accessKeyId: 'dd',
            securityToken: 'dd',
            accessKeySecret: 'dd',
            region:'cn-shanghai',//eu-central-1,ap-southeast-1,
            //播放方式五：使用DRM方式播放
            isDrm:true,
            vid:'34ecdedd081c426383cd66782de6656d',
            accessKeyId:'dd',
            securityToken:'dd',
            accessKeySecret:'dd',
            region:'cn-shanghai',//eu-central-1,ap-southeast-1,
            certId:'dd',//用于请求苹果证书
            },function(player){
                console.log('播放器创建好了。')
           });
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge" >
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<title>Aliplayer Online Settings</title>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.11/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.9.11/aliplayer-min.js"></script>
</head>
<body>
<div class="prism-player" id="player-con"></div>
<script>
var player = new Aliplayer({
  "id": "player-con",
  "source": "spm=a2c4g.11186623.0.0.131d6515frNUTy",
  "width": "100%",
  "height": "500px",
  "autoplay": true,
  "isLive": false,
  "rePlay": false,
  "playsinline": true,
  "preload": true,
  "controlBarVisibility": "hover",
  "useH5Prism": true
}, function (player) {
    console.log("The player is created");
  }
);
</script>
</body>