播放格式支持 | ThumbplayerH5文档

基于专利费用、播放平台等各个方面的原因，各个浏览器对视频格式、编码的支持不是很全面。例如，桌面端chrome原生不支持hls格式视频播放。superplayer中，我们使用“播放内核”的模块来实现各种视频格式、编码的支持。下表是superplayer支持的视频格式。

# 支持格式

视频类别	播放平台	依赖内核	说明
mp4、mov等	全平台	`原生内核`（无需额外安装）	支持的视频决定于浏览器的原生播放能力
hls	桌面端safari、安卓、ios	`原生内核`（无需额外安装）
hls	桌面端chrome、safari	`@tencent/thumbplayer-kernel-txhlsjs`	借助浏览器`MSE`能力实现
flv	桌面端chrome、safari、安卓	`@tencent/thumbplayer-kernel-flvjs`	所有浏览器都无法原生支持flv，借助浏览器`MSE`能力实现
H.265编码（需自行区分编码）	桌面端chrome（>=92）	`@tencent/thumbplayer-kernel-wasm`	由于safari、ios、android均原生支持H.265，因此主要适配chrome内核。借助`Webassembly`能力实现

下面介绍如何借助@tencent/thumbplayer-kernel-txhlsjs在桌面端chrome支持hls视频播放。

# 安装

首先，您需要引入播放内核的npm包：

npm i @tencent/thumbplayer-kernel-txhlsjs;

或者使用script方式引入播放内核的cdn文件：

<script src="https://vm.gtimg.cn/thumbplayer/core/latest/txhlsjs-kernel.js"></script>

# 引入

然后只需要将播放内核的npm包import进来，播放内核会自动注册到superplayer的内核工厂中。

import { KernelFactory } from '@tencent/thumbplayer-core';
// 引入hls播放内核，播放内核会自注册到thumbplayer-core中
import '@tencent/thumbplayer-kernel-txhlsjs';

console.log('已注册的播放内核有：', KernelFactory.kernelMap);// {origin: ƒ, hls.js: ƒ}

您可以看到我们可以打印出内核工厂中已经有两个播放内核，一个即内置的原生播放内核，一个为刚刚注册的“hls播放内核”。

# 配置（非必须）

每种播放内核都可以在创建播放器的时候指定配置，如果您有特殊的配置需求，可以增加配置信息。例如“hls播放内核”的配置如下，我们增加了hlsjsKernelConfig节点：

import SuperPlayer from '@tencent/super-player';
import '@tencent/thumbplayer-kernel-txhlsjs';

const player = new SuperPlayer({
  container: '.container',
  // 增加hls播放内核配置
  hlsjsKernelConfig: {
    // hls播放的缓冲区大小，单位秒
    maxBufferLength: 180,
  },
});

# 播放

安装好播放内核以后，执行播放，播放器会根据视频地址的后缀自行选择使用哪种播放内核。

player.play({
  url: 'https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/hls.m3u8',
});

或者强行指定（通过地址配置中的kernelName参数指定使用哪种播放内核来播放）：

player.play({ 
  url: 'https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/hls.m3u8',
  kernelName: 'hls.js',
});

TIP

实际上，大多情况下，您无需强制指定播放内核！

那么哪种场景需要强制指定呢？例如在桌面端safari浏览器环境下，浏览器实际上是原生支持hls视频播放的，但是出于更好播放体验的考虑，我们不使用原生的播放能力播放hls视频，而想使用“hls播放内核”来播放（hls.js播放内核基于MSE标准实现，具有更高的灵活度），此时我们就可以指定kernelName为hls.js，而不是原生播放。

← 事件使用插件 →