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

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
简介: 本文详细介绍阿里云web播放器快速入门

资源引用

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>
目录
相关文章
|
2月前
|
XML Java 数据格式
Spring IoC容器初始化过程(xml形式)
Spring IoC容器初始化过程(xml形式)
44 0
|
4月前
|
Serverless API 容器
函数计算容器模式如何设置多久释放资源啊?
函数计算容器模式如何设置多久释放资源啊?
367 0
|
6月前
|
Kubernetes 流计算 容器
Flink on k8s的话,怎么在容器运行前初始化一些脚本?
Flink on k8s的话,怎么在容器运行前初始化一些脚本?
42 1
|
7月前
|
弹性计算 缓存 Kubernetes
容器&服务:开篇,压力与资源
本文是服务&容器系列的开篇,以需要解决的核心问题作为铺垫。在后续篇章中,将逐步开始对相关技术进行深入研究,并解决典型的问题作为实践,从中发现使用中可能遇到的问题并解决,深入掌握。
39 0
|
6月前
|
Cloud Native Linux 虚拟化
【云原生】Docker容器资源限制(CPU/内存/磁盘)
【云原生】Docker容器资源限制(CPU/内存/磁盘)
717 0
|
6月前
|
弹性计算 Kubernetes 调度
《Docker资源限制和调度策略:性能优化与资源管理,打造高效稳定的容器环境》
《Docker资源限制和调度策略:性能优化与资源管理,打造高效稳定的容器环境》
144 0
|
6月前
|
Go 虚拟化 云计算
Docker 基础知识解析:容器与传统虚拟化对比:资源利用、启动时间、隔离性和部署效率
Docker 基础知识解析:容器与传统虚拟化对比:资源利用、启动时间、隔离性和部署效率
175 0
|
2月前
|
Kubernetes Linux 调度
「译文」深入了解 Kubernetes 指标 - 第三部分 - 容器资源指标
「译文」深入了解 Kubernetes 指标 - 第三部分 - 容器资源指标
|
3月前
|
XML Java 数据格式
Spring5源码(15)-IoC容器启动过程简析及XmlBeanFactory初始化
Spring5源码(15)-IoC容器启动过程简析及XmlBeanFactory初始化
30 1
|
4月前
|
前端开发 API Python
Matplotlib从入门到精通02-层次元素和容器
Matplotlib从入门到精通02-层次元素和容器
Matplotlib从入门到精通02-层次元素和容器