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

本文涉及的产品
容器服务 Serverless 版 ACK Serverless,317元额度 多规格
容器镜像服务 ACR,镜像仓库100个 不限时长
容器服务 Serverless 版 ACK Serverless,952元额度 多规格
简介: 本文详细介绍阿里云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>
目录
相关文章
|
3月前
|
存储 消息中间件 容器
当一个 Pod 中包含多个容器时,容器间共享一些重要的资源和环境,这使得它们能够更有效地协同工作和交互。
当一个 Pod 中包含多个容器时,容器间共享一些重要的资源和环境,这使得它们能够更有效地协同工作和交互。
|
2月前
|
存储 Docker 容器
containerd容器运行时快速入门使用指南
关于containerd容器运行时的快速入门使用指南,涵盖了镜像管理、容器管理、NameSpace管理、数据持久化、镜像推送至Harbor仓库以及Docker与Containerd集成等内容。
135 1
containerd容器运行时快速入门使用指南
|
1月前
|
SQL Shell 数据库
在TDengine容器中创建初始化数据库的Shell命令实例
以上就是在Docker容器环境中部署并初始化TDengine数据库的全过程,希望对你有所帮助。
47 0
|
3月前
|
存储 资源调度 运维
【容器化运维的艺术】揭秘镜像仓库与资源调度的完美协同!
【8月更文挑战第25天】随着容器技术的发展,企业日益倾向于采用容器化方式部署应用,以提升部署效率及资源管理灵活性。其中,镜像仓库和资源调度成为核心组件。镜像仓库实现容器镜像的集中存储与管理,确保版本一致性和安全性;资源调度则依据实际需求优化容器运行位置与资源配置,提高资源利用率和应用性能。二者协同作用,显著简化应用部署流程,为企业创造更大价值。
70 3
|
3月前
|
存储 Kubernetes 数据中心
在K8S中,同⼀个Pod内不同容器哪些资源是共用的,哪些资源是隔离的?
在K8S中,同⼀个Pod内不同容器哪些资源是共用的,哪些资源是隔离的?
|
3月前
|
缓存 Kubernetes 数据中心
在Docker中,如何控制容器占用系统资源(CPU,内存)的份额?
在Docker中,如何控制容器占用系统资源(CPU,内存)的份额?
|
3月前
|
弹性计算 Kubernetes 开发者
利用容器化服务实现游戏服务器的动态资源配置
【8月更文第12天】在游戏行业中,用户基数的变化往往呈现出明显的波动性,特别是在推广活动期间,用户基数会显著增加,而在非推广期则会有所下降。为了应对这种变化,游戏开发者需要一种能够根据用户基数动态调整服务器资源的解决方案,以确保用户体验的同时最大限度地节省成本。容器化服务因其灵活的资源管理和成本控制能力,成为了理想的解决方案。
60 2
|
4月前
|
Linux Docker 容器
容器资源限制
容器资源限制
36 2
|
3月前
|
存储 缓存 监控
在Linux中,如何优化虚拟机和容器的性能和资源使用?
在Linux中,如何优化虚拟机和容器的性能和资源使用?
|
3月前
|
消息中间件 Kubernetes 数据库
在k8S中,初始化容器(init container)概念原理是什么?
在k8S中,初始化容器(init container)概念原理是什么?