腾讯云播放器 Demo与调用方法

腾讯云播放器配置与调用方法详解

最新推荐文章于 2025-04-19 11:04:37 发布

原创

最新推荐文章于 2025-04-19 11:04:37 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #腾讯云播放器

本文档详细介绍了腾讯云播放器在Web端的使用，支持PC和移动端浏览器播放。提供了基础和点播两种播放模式的Web端视频播放器，并展示了如何设置播放器容器和参数，包括文件ID、appID、尺寸、行内播放属性等。同时，给出了一个完整的腾讯云播放器DEMO，包括RTMP、FLV、M3U8、MP4等多种视频源的配置示例，以及自定义功能如自动续播、进度标记和右键菜单的插件设置。

Web 端播放器支持 PC 端和移动端的浏览器视频播放，丰富灵活的接口可帮助用户快速与自有 Web 应用集成。针对超级播放器的基础播放和点播播放两种播放模式，腾讯云分别提供了其对应的 Web 端视频播放器，您可根据自身需求进行体验。

腾讯云播放器设置

<!-- 设置播放器容器 -->
<video id="player-container-id" preload="auto" width="640" height="360" 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', { // player-container-id 为播放器容器ID，必须与html中一致
    fileID: '5285890799710670616', // 请传入需要播放的视频filID 必须
    appID: '1400329073', // 请传入点播账号的appID 必须
    //其他参数请在开发文档中查看
    plugins: {
      ContinuePlay: {
        // auto: true // 是否在播放时自动续播
      },
      ProgressMarker: true,
      ContextMenu: {
        statistic: true,
        levelSwitch: {
          open: true, // 打开切换提示
          // switchingText: '开始', // 开始切换时文案
          // switchedText: '成功', // 切换成功时文案
          // switchErrorText: '失败', // 切换失败时文案
        }
      }
    }
  });
</script>

腾讯云播放器 Demo与调用方法


<!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>播放器例子-输入参数</title>
	<meta name="format-detection" content="telephone=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-