aliyun阿里云视频直播播放器代码

最新推荐文章于 2022-08-13 14:27:05 发布

徊忆羽菲

最新推荐文章于 2022-08-13 14:27:05 发布

阅读量3.7k

点赞数

分类专栏：软件 Html

本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/94446348

版权

Html 同时被 2 个专栏收录

248 篇文章 7 订阅

订阅专栏

软件

124 篇文章 1 订阅

订阅专栏

阿里云aliyun播放器用户测试用例代码

- rtmp格式

    <!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.8.2/skins/default/aliplayer-min.css" />
         <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.2/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 : 'https://vod.300hu.com/4c1f7a6atransbjngwcloud1oss/7caa8275157524742462005249/v.f30.mp4?dockingId=7bc7d2cd-5c29-4e2e-a000-b0ebc0ed3b84&storageSource=3',
                //播放方式二：点播用户推荐
                vid : '1e067a2831b641db90d570b6480fbc40',
                playauth : 'ddd',
                cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',            
                //播放方式三：仅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
                },function(player){
                    console.log('播放器创建好了。')
               });
            </script>
        </body>
    </html>

效果图，可以点击播放
在这里插入图片描述

rtmp格式


<!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.8.7/skins/default/aliplayer-min.css" />
    <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.7/aliplayer-min.js"></script>
</head>
<body>
<div class="prism-player" id="player-con"></div>
<script>
    var player = new Aliplayer({
            "id": "player-con",
            "source": "rtmp://ali-play.lezhibo.com/lezhibo/89d36a8e568e4748b0c35405b5d5e21f",
            "width": "100%",
            "height": "500px",
            "autoplay": true,
            "isLive": true,
            "rePlay": false,
            "playsinline": true,
            "preload": true,
            "controlBarVisibility": "hover",
            "useH5Prism": true
        }, function (player) {
            console.log("The player is created");
        }
    );
</script>
</body>

徊忆羽菲

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
aliyun阿里云视频直播播放器代码

阿里云aliyun播放器用户测试用例代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, height=devic...
复制链接

扫一扫