Overview
This document describes how to use VideojsPlayer together with the rich audio/video capabilities of Cloud Infinite (CI) to play back video files stored in COS in a web browser. Integration Guide
Step 1. Import player style and script files into the page
<!-- Player style file -->
<link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
<!-- Player script file -->
<script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script>
Note:
We recommend you deploy the above static resources on your own when using the player.
Step 2. Set the player container node
Place the player container in the desired place on the page. For example, add the following code to index.html
(the container ID, width, and height can be customized).
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="100%"
height="100%"
data-setup="{}"
></video>
Step 3. Get the video file object address
3. Get the video file object address in the format of https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.<video format>
.
Note:
If cross-origin access is involved, you need to set CORS for the bucket as instructed in Setting CORS. If the bucket permission is private read/write, the object address needs to carry a signature. For more information, see Request Signature. Step 4: Set the video address in the player container and pass in the COS video file object URL
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="100%"
height="100%"
data-setup="{}"
>
<source
src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4"
type="video/mp4"
/>
</video>
Function Guide
1. Get the object address of the video file in the COS bucket.
Note:
We recommend you transcode videos for playback because untranscoded videos may experience compatibility issues during playback. You can get video files in different formats with CI's audio/video transcoding feature. 2. For different video formats, in order to ensure the compatibility with different browsers, corresponding dependencies need to be imported.
MP4: There is no need to import other dependencies.
HLS: If you want to play back HLS videos through HTML5 in a modern browser such as Chrome and Firefox, you need to import hls.min.js
before importing tcplayer.min.js
.
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/libs/hls.min.0.13.2m.js"></script>
FLV: If you want to play back FLV videos through HTML5 in a modern browser such as Chrome and Firefox, you need to import flv.min.js
before importing tcplayer.min.js
.
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/libs/flv.min.1.6.2.js"></script>
DASH: You need to import the dash.all.min.js
file.
<script src="https://cos-video-1258344699.cos.ap-guangzhou.myqcloud.com/lib/dash.all.min.js"></script>
3. Initialize the player and pass in the object address.
<!-- MP4 -->
<source
src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4"
type="video/mp4"
/>
<!-- HLS -->
<source
src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.m3u8"
type="application/x-mpegURL"
/>
<!-- FLV -->
<source
src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.flv"
type="video/x-flv"
/>
<!-- DASH -->
<source
src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mpd"
type="application/dash+xml"
/>
Get code samples:
Playing back PM3U8 video
PM3U8 refers to private M3U8 video file. COS provides a download authorization API for getting private M3U8 TS resources. For more information, see Private M3U8 API. <source
src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.m3u8?ci-process=pm3u8&expires=3600"
type="application/x-mpegURL"
/>
Get code samples:
Setting thumbnail
1. Get the object address of the thumbnail in the COS bucket.
Note:
CI's intelligent thumbnail feature can extract optimal frames to generate thumbnails to make the video content more engaging. 2. Initialize the player and set the thumbnail image.
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="100%"
height="100%"
data-setup="{}"
poster="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/poster.png"
>
<source
src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4"
type="video/mp4"
/>
</video>
Get code samples:
Playing back HLS encrypted video
To ensure the security of video content and prevent unauthorized download and distribution of videos, CI provides the feature of encrypting HLS video content, which is more secure than privately readable files. Encrypted videos cannot be distributed to users without access for playback. Even if they are downloaded, they are still encrypted and cannot be redistributed maliciously. This protects your video copyrights from being infringed upon.
Follow the steps below:
2. Initialize the player and pass in the video object address.
<source
src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.m3u8"
type="application/x-mpegURL"
/>
Get code samples:
Was this page helpful?