tencent cloud

PrevNext

文档反馈

请输入关键字

Recent Pages

文档
对象存储
    文档
    Download PDF

    使用 VideojsPlayer 播放 COS 视频文件

    最后更新时间：2024-01-06 10:54:03
    下载PDF

      简介

      本文将介绍如何使用 VideojsPlayer 并结合 腾讯云数据万象(CI) 所提供的丰富的音视频能力，实现在 Web 浏览器播放 COS 视频文件。

      集成指引

      步骤1：在页面中引入播放器样式文件及脚本文件

      <!-- 播放器样式文件 -->
      <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
      <!-- 播放器脚本文件 -->
      <script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script>
      说明
      建议在正式使用播放器时，自行部署以上相关静态资源。

      步骤2：设置播放器容器节点

      在需要展示播放器的页面位置加入播放器容器。例如，在 index.html 中加入如下代码（容器 ID 以及宽高都可以自定义）。
      <video
        id="my-video"
        class="video-js"
        controls
        preload="auto"
        width="100%"
        height="100%"
        data-setup="{}"
      ></video>

      步骤3：获取视频文件对象地址

      1. 创建一个存储桶。
      2. 上传视频文件。
      3. 获取视频文件对象地址，格式为https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.<视频格式>。
      说明
      若存在跨域问题，则需要进行存储桶跨域访问 CORS 设置，详情请参见 设置跨域访问。
      若存储桶为私有读写，则对象地址需要携带签名，详情请参见 请求签名。

      步骤4：在播放器容器内设置视频地址，传入 COS 视频文件对象地址 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>

      功能指引

      

      播放不同格式的视频文件

      1. 获取 COS 存储桶上的视频文件对象地址。
      说明
      未经转码的源视频在播放时有可能出现不兼容的情况，建议您使用转码后的视频进行播放，通过数据万象 音视频转码处理，获取不同格式视频文件。
      2. 针对不同的视频格式，为了保证多浏览器的兼容性，需要引入对应的依赖。
      MP4：无需引入其他依赖。
      HLS：如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.min.js 之前引入 hls.min.js。
        <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/libs/hls.min.0.13.2m.js"></script>
      FLV：如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 FLV 格式的视频，需要在 tcplayer.min.js 之前引入 flv.min.js。
        <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/libs/flv.min.1.6.2.js"></script>
      DASH：DASH 视频需要加载 dash.all.min.js 文件。
        <script src="https://cos-video-1258344699.cos.ap-guangzhou.myqcloud.com/lib/dash.all.min.js"></script>
      3. 初始化播放器并传入对象地址。
      <!-- 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"
      />
      获取示例代码：
      播放 MP4 示例代码
      播放 FLV 示例代码
      播放 HLS 示例代码
      播放 DASH 示例代码
      

      播放 PM3U8 视频

      PM3U8 是指私有的 M3U8 视频文件，COS 提供用于获取私有 M3U8 TS 资源的下载授权API，可参见 私有 M3U8 接口。
      <source
        src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.m3u8?ci-process=pm3u8&expires=3600"
        type="application/x-mpegURL"
      />
      获取示例代码：
      播放 PM3U8 示例代码
      

      设置封面图

      1. 获取 COS 存储桶上的封面图对象地址。
      注意
      通过数据万象 智能封面 能力，提取最优帧生成截图作为封面，可提升内容吸引力。
      2. 初始化播放器并设置封面图。
      <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>
      获取示例代码：
      设置封面图示例代码
      

      播放 HLS 加密视频

      为了保障视频内容安全，防止视频被非法下载和传播，数据万象提供了对 HLS 视频内容进行加密的功能，拥有相比于私有读文件更高的安全级别。加密后的视频，无法分发给无访问权限的用户观看。即使视频被下载到本地，视频本身也是被加密的，无法恶意二次分发，从而保障您的视频版权不受到非法侵犯。 操作步骤如下：
      1. 参见 播放 HLS 加密视频 和 COS 音视频实践 | 给你的视频加把锁 流程，生成加密视频。
      2. 初始化播放器并传入视频对象地址。
      <source
        src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.m3u8"
        type="application/x-mpegURL"
      />
      获取示例代码：
      播放 HLS 加密视频示例代码
      联系我们

      联系我们，为您的业务提供专属服务。

      联系我们
      技术支持

      如果你想寻求进一步的帮助，通过工单与我们进行联络。我们提供7x24的工单服务。

      提交工单
      7x24 电话支持
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      隐私条款服务条款缓存条款