初始化 Web 播放器
Step 1: 在页面中引入文件
请将下载好的播放器文件解压缩,并且放在一个 Web 服务器中。然后在 HTML 文件中引入以下的 css 和 js 文件。
<link href="//path/to/ctyunplayer.css" rel="stylesheet">
<script src="//path/to/ctyunplayer.js"></script>
Step 2: 在页面中放置播放器容器
播放器使用的是 HTML 5 的 <video>
标签,请在需要展示视频的地方引入以下容器,其中容器id,高宽都可以自定义。
<source>
中的 src
是播放视频的 url,可以在天翼云云点播服务中取得。而type
字段则是有以下对应规则:
- 如果视频格式是 mp4,则该字段应为
video/mp4
- 如果视频格式为 hls,则该字段应为
application/x-mpegURL
<video id="ctyunplayer-container" width="414" height="270" preload="true" playsinline>
<source src="//path/to/ctyun/xstore/transcoded/video.hls" type="application/x-mpegURL">
</video>
Step 3: 通过 JS 代码进行初始化
在页面加载完之后(通常会在 windows 的 load 事件中 或者在 HTML 的页面尾部的 <script>
标签中)执行以下 javascript 初始化代码
var player = ctyunplayer("ctyunplayer-container");
player.play();
在初始化了 player 之后,除了播放器原本的提供的按钮之外,您还可以通过以下的接口来实现相关的功能: