Aliplayer快速入门：资源引用、添加容器元素与初始化

最新推荐文章于 2024-04-23 09:44:24 发布

weixin_34177064

最新推荐文章于 2024-04-23 09:44:24 发布

阅读量1k

点赞数

文章标签： javascript 前端 ViewUI

原文链接：https://yq.aliyun.com/articles/241608

版权

资源引用

version填入具体的版本号，例如2.2.0

不依赖于任何的前端js库，只需要在页面中引用如下js文件，就可以进行播放器的初始化：

http://g.alicdn.com/de/prismplayer/{version}/aliplayer-min.js

这个文件同时包含了Flash和Html5跨终端自适应的逻辑。如果您只是想使用其中一种播放技术，也可以只引用对应技术的js文件，从而获得更小的文件体积：

Flash版本:

http://g.alicdn.com/de/prismplayer/{version}/aliplayer-flash-min.js

Html5版本:

http://g.alicdn.com/de/prismplayer/{version}/aliplayer-h5-min.js

html5播放器，请额外引用css文件：

http://g.alicdn.com/de/prismplayer/{version}/skins/default/aliplayer-min.css

添加容器元素

请务必加上prism-player类名，此为h5播放器皮肤的钩子。

<div id="J_prismPlayer" class="prism-player"></div>

初始播放器

直接播放url实例

播放器可以通过初始化参数 source 传递视频的 url 直接进行播放

<body>
    <div id="J_prismPlayer" class="prism-player"></div>   <!-- prism-player为h5播放器皮肤的钩子类名，请务必加上 -->
    <script>
        var videoUrl=""; //获取的视频地址
        // 初始化播放器
        var player = new Aliplayer({
            id: "J_prismPlayer", // 容器id
            source: videoUrl,        // 视频url
            width: "100%",       // 播放器宽度
            height: "400px"      // 播放器高度
        });
    </script>
</body>

vid播放实例

通过设置视频vid和播放凭证playauth参数播放阿里云视频点播服务中托管的视频

如何接入点播服务

开通视频点播服务

配置点播加速域名

完成点播加速域名CNAME绑定

<body>
    //播放器容器
    <div id='J_prismPlayer' class='prism-player'>   <!-- prism-player为h5播放器皮肤的钩子类名，请务必加上 -->
    //播放器初始化代码
    <script>
          var player = new Aliplayer({
              id: "J_prismPlayer", // 容器id
              vid : '1e067a2831b641db90d570b6480fbc40',//媒体转码服务的媒体Id
              playauth : '',//播放鉴权 [playauth参照](https://help.aliyun.com/document_detail/52833.html?spm=5176.doc51236.6.627.5gm5gf)
              width: "640px",
              height: "480px"
          });
     </script>
</body>

直播实例

播放器初始化参数 isLive 设置为 true 时为直播模式,直播源支持 HLS、 Http Flv(Flash only)、RTMP(Flash only)

<body>
    //播放器容器
    <div id='J_prismPlayer' class='prism-player'>   <!-- prism-player为h5播放器皮肤的钩子类名，请务必加上 -->
    //播放器初始化代码
    <script>
          var liveurl="http://live-url";
          var player = new Aliplayer({
              id: "J_prismPlayer", // 容器id
              source: liveurl,//直播流url
              isLive:true,//设置为true时为直播状态
              width: "640px",
              height: "480px"
          });
     </script>
</body>

weixin_34177064

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Aliplayer快速入门：资源引用、添加容器元素与初始化

资源引用version填入具体的版本号，例如2.2.0不依赖于任何的前端js库，只需要在页面中引用如下js文件，就可以进行播放器的初始化：http://g.alicdn.com/de/prismplayer/{version}/aliplayer-min.js这个文件同时包含了Flash和Html5跨终端自适应的逻辑。如果您只是想使用其中一种播...
复制链接

扫一扫