初始化 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 之后,除了播放器原本的提供的按钮之外,您还可以通过以下的接口来实现相关的功能: