cos-video/examples/web/tcplayer/pm3u8.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
  <title>COS 音视频</title>
  <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/tcplayer.min.css" rel="stylesheet">
  <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.v4.2.min.js 之前引入 hls.min.0.13.2m.js。-->
  <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/libs/hls.min.0.13.2m.js"></script>
  <!--播放器脚本文件-->
  <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.0/tcplayer.v4.5.0.min.js"></script>
  <style>
    html,body{
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    .tcplayer {
      margin: 0 auto;
      width: 100%;
    }
  </style>
</head>
<body>
<!-- 设置播放器容器 -->
<video id="player-container-id" preload="auto" width="100%" height="450" playsinline webkit-playsinline>
</video>
<!--
注意事项：
* 播放器容器必须为 video 标签
* player-container-id 为播放器容器的ID，可自行设置
* 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
* playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
* 设置 x5-playsinline 属性会使用 X5 UI 的播放器
* 右键点击视频画面可选镜像
-->
<script>
  var player = TCPlayer("player-container-id", {});
  // 关于 pm3u8 详情请查看相关文档：https://cloud.tencent.com/document/product/436/73189
  player.src('https://cos-video-1258344699.cos.ap-guangzhou.myqcloud.com/hls/test.m3u8?ci-process=pm3u8&expires=3600')
</script>
</body>
</html>