极简例子 | ThumbplayerH5文档

# 极简例子

我们可以先尝试一下下面的极简例子在你的浏览器运行一下：

<body>
  <div class="container" style="width: 853px; height: 480px;">
  </div>
  <script charset="utf-8" src="https://vm.gtimg.cn/thumbplayer/superplayer/superplayer.js"></script>
  <script>
    const player = new window.SuperPlayer({
      // 传入需要展示播放器的容器选择器
      container: '.container',
    });
    player.play({
      url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    });
  </script>
</body>

你可以看到如下播放器画面： superplayer

以上为cdn方式接入superplayer，我们也可以使用npm包的方式接入。

# npm接入

首先安装superplayer的npm包

npm install @tencent/super-player

导入SuperPlayer类并实例化播放器：

import SuperPlayer from '@tencent/super-player';

const player = new SuperPlayer({
  // 提供一个页面的容器，SuperPlayer会将自己append到此容器中
  container: '.container',
});
// 调用播放接口开始播放视频
player.play({ url: '//commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' });

注意

@tencent/super-player提供了cjs和esm两种js模块，实际上，ThumbPlayerH5的所有npm包都提供这两种模块。

← 介绍配置参数 →