html5 video 支持格式的视频-React 中的视频播放器手册

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

翻译：宜川

上面写着1

作为开发人员，了解最新的工具和技术以在 Web 应用程序中实现无缝视频播放至关重要。 React 是一个流行的 JavaScript 库，它为构建用户界面提供了一个高效、灵活的平台，使其成为将视频播放功能合并到 Web 项目中的理想选择。

在本文中，我们将介绍视频播放的基础知识，并重点介绍一些最流行的 JavaScript 视频播放器框架、它们的用途以及如何在 React 中实现它们。 无论您是构建视频流平台、电子学习应用程序，还是只是添加视频来增强您的网站，本指南都将为您提供实现愿景所需的工具。

2 视频播放基础知识

要了解视频播放，首先需要了解从用户点击播放按钮到视频播放第一帧之间的过程。 这两点之间可能有许多步骤出错，最终可能会影响您的视频性能，或者在更糟糕的情况下，意味着您的视频根本无法播放。

除非您的视频文件非常小，否则您的视频播放器不太可能在播放之前一次性下载整个文件。 这最终会导致消费者等待相当长的时间才能听到任何声音，这可能会让他们不耐烦并不再观看视频。

一次下载整个视频的过程通常称为单源播放，在大多数用例中不建议这样做。 相反，视频内容通常分为称为“块”的部分，并且视频播放器连续下载这些块，以确保设备在任何给定时间仅下载小数据块。

除了将数据分成小块之外，播放器通常还提供多个级别的视频质量，因此客户可以选择更适合其网络条件的比特率。 如果您以前见过可怕的缓冲符号，那是因为视频播放器无法及时提升到较小的比特率，但播放器正在尝试下载每个块。

客户端在不同质量级别的视频之间切换并尝试下载块的过程称为自适应比特率流（ABS）。 MSS（Microsoft 平滑流）、HLS（HTTP 实时流）和 DASH（HTTP 上的动态自适应流）是三种不同的技术，旨在实现有效的 ABS。

平滑流传输合约 SSTP

SSTP 由 Microsoft 标准化，并随着 Silverlight 播放器的推出而首次出现。 SSTP 以一系列小块的形式下载视频，这些小块缓存在网络边缘，这意味着请求和接收这些块的客户端事务可以更快地发生。

为了开始播放，视频播放器向服务器请求清单文件，其中列出了有关所请求视频的详细信息，例如视频的持续时间、每个块的位置以及播放器可用的比特率。

下面是一个 SSTPmanifest 示例，其中标记了一些关键信息：

<SmoothStreamingMedia
  MajorVersion="2"
  MinorVersion="1"
  Duration="1209510000"> // Total video duration
  
  
  <Protection>
     <ProtectionHeader SystemID="{9A04F079-9840-4286-AB92E65BE0885F95}">
        
     </ProtectionHeader>
   </Protection> 
  
  
  <StreamIndex
    Type="video"
    Name="video"
    Chunks="4" // Number of chunks
    QualityLevels="4" // Number of bitrates available
    MaxWidth="1280"
    MaxHeight="720"
    DisplayWidth="1280"
    DisplayHeight="720"
    Name = "video"
    Url="QualityLevels({bitrate})/Fragments(video={start time})"> // URL template to request chunks
    
    
    <QualityLevel 
      Index="0" 
      Bitrate="1536000" 
      FourCC="WVC1"
      MaxWidth="720" MaxHeight="480"
      CodecPrivateData = "270000010FCBEE1670EF8A16783BF180C9089CC4AFA11C0000010E1207F840"
         >
         <CustomAttributes>
            <Attribute Name = "Compatibility" Value = "Desktop" />
         </CustomAttributes>
      </QualityLevel>

    <QualityLevel 
      Index="5" 
      Bitrate="307200" 
      FourCC="WVC1"
      MaxWidth="720" MaxHeight="480"
      CodecPrivateData = "270000010FCBEE1670EF8A16783BF180C9089CC4AFA11C0000010E1207F840">
         <CustomAttributes>
            <Attribute Name = "Compatibility" Value = "Handheld" />
         </CustomAttributes>
      </QualityLevel>
    
    
    <c t = "0" d = "19680000" />
    <c n = "1" t = "19680000" d="8980000" />
  </StreamIndex>
</SmoothStreamingMedia>

SSTP 最常用于 Microsoft 平台，是较旧的 ABS 技术之一，致力于提供最小的缓冲和快速的启动时间。

HLS

HLS 代表 HTTP Live Streaming，由 Apple 于 2009 年与 iPhone 3 发布同时开发，作为流行的 Adob​​e Flash 格式的替代品。

HLS 将视频分成 10 秒的块，并将它们索引到单独的播放列表文件中，并且是 iOS 和 OSX 的 Apple 设备上唯一支持的标准。

HLS播放列表的示例如下：

#EXTM3U
#EXT-X-PLAYLIST-TYPE:VOD

#EXT-X-TARGETDURATION:10
#EXT-X-VERSION:4
#EXT-X-MEDIA-SEQUENCE:0

#EXTINF:10.0,

http://example.com/movie1/fileSequenceA.ts
#EXTINF:10.0,
http://example.com/movie1/fileSequenceB.ts
#EXTINF:10.0,
http://example.com/movie1/fileSequenceC.ts
#EXTINF:9.0,
http://example.com/movie1/fileSequenceD.ts
#EXT-X-ENDLIST

HLS 的主要优点是它是 Apple 设备唯一的原生 ABS 格式。 如果你想在iOS设备上实现视频播放，HLS是你唯一的选择。

短跑

HTTP 上的动态自适应流媒体 (DASH) 是一项相当新的技术，旨在为所有设备提供支持，避免因必须为同一视频源实施多种技术（例如 MSS 和 HLS）而带来不必要的复杂性。

2009年MPEG提出动议后，微软、微软等50多家大公司合作提出了MPEG-DASH标准，最终于2012年发布。

从本质上讲，DASH 致力于将所有当前技术融合为一，提供每种标准的优点并降低技术难度。 通常，DASH 视频被分为两到四秒的视频块，从而实现更快的视频下载和更好的性能。

下面是一个 DASHmanifest 示例：

<MPD xmlns="urn:mpeg:dash:schema:mpd:2011" profiles="urn:mpeg:dash:profile:full:2011">
    <Period duration="PT10M"> // Period Duration
        <BaseURL>main/</BaseURL>
        <AdaptationSet mimeType="video/mp2t">
            <BaseURL>video/</BaseURL>
            
            <Representation id="720p" bandwidth="3200000" width="1280" height="720">
                <BaseURL>720p/</BaseURL>
                
                <SegmentList timescale="90000" duration="5400000">
                    <RepresentationIndex sourceURL="representation-index.sidx"/>
                    <SegmentURL media="segment-1.ts"/>
                    <SegmentURL media="segment-2.ts"/>
                    <SegmentURL media="segment-3.ts"/>
                    <SegmentURL media="segment-4.ts"/>
                    <SegmentURL media="segment-5.ts"/>
                    <SegmentURL media="segment-6.ts"/>
                    <SegmentURL media="segment-7.ts"/>
                    <SegmentURL media="segment-8.ts"/>
                    <SegmentURL media="segment-9.ts"/>
                    <SegmentURL media="segment-10.ts"/>
                </SegmentList>
            </Representation>
            
            <Representation id="1080p" bandwidth="6800000" width="1920" height="1080">
                <BaseURL>1080/</BaseURL>
                
                <SegmentList timescale="90000" duration="5400000"> // Segment duration
                    <RepresentationIndex sourceURL="representation-index.sidx"/>
                    <SegmentURL media="segmentl-1.ts"/>
                    <SegmentURL media="segmentl-2.ts"/>
                    <SegmentURL media="segmentl-3.ts"/>
                    <SegmentURL media="segmentl-4.ts"/>
                    <SegmentURL media="segmentl-5.ts"/>
                    <SegmentURL media="segmentl-6.ts"/>
                    <SegmentURL media="segmentl-7.ts"/>
                    <SegmentURL media="segmentl-8.ts"/>
                    <SegmentURL media="segmentl-9.ts"/>
                    <SegmentURL media="segmentl-10.ts"/>
                </SegmentList>
            </Representation>
        </AdaptationSet>
    </Period>
</MPD>

3 视频播放器框架

现在您已经了解了不同的 ABS 技术，我们可以看看可用于容纳它们的各种 JavaScript 播放器框架。 虽然行业实际上正在向 DASH 发展，但它仍然是一项相对较新的技术，运行 MSS 或 HLS 的系统仍然存在于我们的视频基础设施中，尤其是在 Apple 设备上html5 video 支持格式的视频，HLS 是唯一的选择。

让我们看一下一些最流行的 JavaScript 视频播放器框架、它们支持的 ABS 技术以及如何在 React 中实现它们。

视频.js

我们要研究的第一项技术可以说是当今最流行的开源视频播放器框架之一。 Video.js 于 2010 年构建，考虑到了 JavaScript 世界，全球约有 500,000 个网站使用。

Video.js 的主要卖点是它致力于支持所有类型的视频格式，包括 HLS 和 DASH 等自适应视频格式。

Video.js 被 Tumblr 和 LinkedIn 等公司使用，易于设计、跨功能且易于实现。 它在 React 世界中的表现如何？

值得庆幸的是，在 React 中实现 Video.js 并不是太令人头痛，并且可以在几分钟内启动并运行。 首先，下载 video.js 或使用 npm export npmivideo.js。

从哪里开始，需要实例化video.js播放器，在componentDidMount之后使用：

import React from 'react';
import videojs from 'video.js'
export default class VideoPlayer extends React.Component {
  componentDidMount() {
    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
      console.log('Video.js Ready', this)
    });
  }
  componentWillUnmount() {
    if (this.player) {
      this.player.dispose()
    }
  }
  render() {
    return (
      <div> 
        <div data-vjs-player>
          <video ref={ node => this.videoNode = node } className="video-js"></video>
        </div>
      </div>
    )
  }
}

您可能会注意到播放器被包裹在 data-vjs-player div 标签中。 这个额外的步骤确保不会在 DOM 中创建额外的包装器。 创建组件后，可以使用各种选项触发它来开始播放。

查看 Video.js 上可用选项的完整列表：

const videoJsOptions = {
  autoplay: true,
  controls: true,
  sources: [{
    src: '/path/to/video.mp4',
    type: 'video/mp4'
  }]
}
return <VideoPlayer { ...videoJsOptions } />

HLS.js

Video.js 提供了播放 HLS 内容的解决方案，但作为处理 Apple 格式的更好选择之一而受到广泛关注的播放器框架是 HLS.js。 HLS.js 于 2015 年发布，目前已在数千个知名网站上发布，包括 Twitter 和伦敦早报。

HLS.js 的吸引力在于其实现的简单性和占用空间小（它的大小是本文中提到的其他播放器的一半，为 71.1KB）。 通过用于播放的 HTML5 视频和媒体源增强，您可以在浏览器中快速高效地提供可靠的 HLS 播放。

在 React 中实现 HLS.js 的第一步是下载最新的库并将其包含在您的 React 项目中，或者使用 npmihls.js。 从那里，我们在渲染函数中创建一个标准标签。

我们还将提供对播放器的引用，this.player，以便我们稍后可以使用它来实例化我们的播放器框架：

import React from "react";
import Hls from "hls.js";
export default class VideoPlayer extends React.Component {
  state = {};
  render() {
    return (
          <video
            className="videoCanvas"
            ref={player => (this.player = player)}
            autoPlay={true}
          />
    );
  }
}

视频标记就位后，在 HLS.js 中渲染视频就像更新 componentDidUpdate 以附加媒体一样简单：

import React from "react";
import Hls from "hls.js";
export default class VideoPlayer extends React.Component {
  state = {};
  componentDidUpdate() {
      const video = this.player;
      const hls = new Hls();
      const url = "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8";
 
      hls.loadSource(url);
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED, function() { video.play(); });
  }
  render() {
    return (
          <video
            className="videoCanvas"
            ref={player => (this.player = player)}
            autoPlay={true}
          />
    );
  }
}

在这里您可以看到 componentDidUpdate 源流已加载，附加到视频播放器，并且侦听器附加到清单事件，以便它知道何时播放视频。 可以在此处找到 HLS.js[] 的完整文档，以及播放过程中可能触发的许多干扰。

DASH.js

DASH.js 由 DASH 行业峰会创建，旨在设计一个视频播放器框架，允许开发人员使用日益流行的 MPEG-DASH 格式构建视频播放器，该格式与浏览器无关且在生产环境中功能强大。

实现 DASH.js 视频播放器框架的第一步是将库导出到您的项目，最新的库可以在此处找到。

与其他玩家一样，您需要创建标签并将其放置在渲染函数中。 这就是 DASH.js 渲染视频的目的。

同样，我们将为视频标签提供对 this.player 的引用，以便稍后使用它来初始化 DASH.js：

import React from "react";
import * as dashjs from "dash.js";
export default class VideoPlayer extends React.Component {
  state = {};
  render() {
    return (
          <video
            ref={player => (this.player = player)}
            autoPlay={true} 
          />
    );
  }
}

实现播放的最后一步是实例化播放器 componentDidUpdate 并给它一个目标 URL：

import React from "react";
import * as dashjs from "dash.js";
export default class VideoPlayer extends React.Component {
  state = {};
  componentDidUpdate() {
      const url = "https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd";
      const video = this.player;
      const dashjs = dashjs.MediaPlayer().create();
      dashjs.initialize(video, url, true);
  }
  render() {
    return (
          <video 
            ref={player => (this.player = player)}
            autoPlay={true} 
          />
    );
  }
}

此时，您应该会看到一些视频正在播放！ DASH.js 有许多可用的设置、事件和自定义选项，可以在其文档中找到。

反应播放器

ReactPlayer 是一个流行的开源库，它提供了一个 React 组件，可以轻松地将视频播放集成到 React 应用程序中。 它简化了处理各种视频源和格式的过程，提供了统一的 API 和一系列可定制的选项。

该库还提供了一组直观的道具和反弹，使您可以自定义视频播放器的外观和行为。 它提供播放/暂停控制、搜索、音量控制、全屏模式和字幕支持等功能。 据悉，ReactPlayer处理跨浏览器兼容性，在不同平台和设备上提供一致的体验。

要在项目中实现 ReactPlayer 进行视频播放html5 video 支持格式的视频，请导出 ReactPlayer 组件并向其传递一些属性：

import React from 'react';
import ReactPlayer from 'react-player';

const VideoPlayer = () => {
  return (
    <div>
      <h2>Video Player</h2>
      <ReactPlayer
        url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
        controls={true}
        width="800px"
        height="450px"
      />
    </div>
  );
};

export default VideoPlayer;

使用 ReactPlayer 加载多个视频

ReactPlayer 不支持同时加载多个 URL 源。 ReactPlayer 中的 urlprops 期望单个视频 URL 作为字符串值。

但是，可以通过为每个视频源创建单独的 ReactPlayer 组件并独立管理其状态来避免这种情况。 您可以使用状态管理库（例如 Redux 或 React 的外部 useStateHook）来处理每个视频播放器组件的状态：

import React, { useState } from 'react';
import ReactPlayer from 'react-player';

const VideoPlayer = () => {
  const [videoSources, setVideoSources] = useState([
    'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
    'https://www.youtube.com/watch?v=3tmd-ClpJxA',
    'https://www.youtube.com/watch?v=JGwWNGJdvx8'
  ]);

  const renderVideoPlayers = () => {
    return videoSources.map((url, index) => (
      <div key={index}>
        <ReactPlayer
          url={url}
          controls={true}
          width="800px"
          height="450px"
        />
      </div>
    ));
  };

  return (
    <div>
      <h2>Video Player</h2>
      {renderVideoPlayers()}
    </div>
  );
};

export default VideoPlayer;

视频反应

Video-React 是另一个基于 React 构建的流行开源库，它依赖 HTML5 视频功能来处理视频源和处理播放器控件。 Video-React 支持常见的视频格式，例如 MP4、WebM 和 Ogg，还允许您播放来自外部来源（例如 YouTube 和 Vimeo）的视频。

Video-React 提供了一系列功能和控件，包括播放/暂停、搜索、音量控制、全屏模式和可自定义的播放器 UI。 它还提供了一个简单的集成过程，允许您使用必要的播放器控件包装视频组件并根据您的要求进行配置。

Video-React 有一个简单的声明式 API，初学者和经验丰富的 React 开发人员都可以使用。 要使用它，您首先必须安装该库：

npm install --save video-react react react-dom redux

完成此操作后，您可以从库中导出播放器组件并设置视频播放。 下面是一个例子：

import React from 'react';
import { Player } from 'video-react';

export default props => {
  return (
    <Player
      playsInline
      poster="/assets/poster.png"
      src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
    />
  );
};

视频-React 与 ReactPlayer

尽管 Video-React 受到 Video.js 的启发，但大多数开发人员都使用它作为 ReactPlayer 的替代品，因为这两个播放器具有相似的功能。 它们一般根据开发者的个人喜好互换使用，但它们之间没有什么区别：

ReactPlayerVideo-React

支持的格式

支持多种视频格式，包括MP4、WebM、YouTube、Vimeo等。

支持常见的视频格式，如 MP4、WebM、Ogg，以及播放 YouTube 和 Vimeo 等外部来源的视频

API和组件

提供React组件用于视频播放和控制

提供一组React组件和可定制的播放器UI用于视频播放

多样化

提供一系列可自定义的选项和属性来控制播放、外观和行为

提供灵活且可定制的 UI，具有各种播放和外观控件

跨浏览器支持

处理跨浏览器兼容性并确保在不同平台和设备上获得一致的视频播放体验

支持 HTML5 视频功能并具有广泛的跨浏览器支持

特征

提供播放/暂停控制、搜索、音量控制、全屏模式、支持字幕等功能

提供播放/暂停控制、进度控制、音量控制、全屏切换等功能

文档

提供全面的文档、示例和手册

提供详细的文档、API 参考和示例，以便于集成和定制

正如您所看到的，ReactPlayer 和 Video-React 是非常相似的视频播放工具，因此尽管 ReactPlayer 可能是三者中更流行的，Video-React 仍然是一个很好的 ReactPlayer 替代品。

4 使用 HTML 标签在 React 中播放视频

事实上，大多数开发者在React中使用上述框架进行视频播放，但是使用HTML标签在React中部署普通HTML视频仍然是可能的。 这是默认设置，虽然可能不太漂亮，但仍然有效。

要使用 HTML 标记播放本地视频，您只需将视频导出到您的页面，然后将其传递到 video 标签中：

import React from 'react';
import video from './Videos.video1.mp4'

const VideoPlayer = () => {
  return (
    <div>
      <h2>Video Player</h2>
      <video src={video} width="800" height="400" controls />
    </div>
  );
};

export default VideoPlayer;

标签src的属性指定了要播放的视频文件的URL。 在此示例中，我们从本地 C 驱动器导出视频文件，但您可以将其替换为您选择的外部 URL，它将正常工作。

5写在最后

本文介绍了视频播放的基础知识以及用户点击播放按钮时幕后发生的情况。 我们回顾了三种最流行的 ABS 格式以及每种格式的应用程序，同时还回顾了一些流行的 React 视频播放器及其各种实现。

随着视频成为绝大多数互联网用户消费信息的第一方式，现在是开始深入研究视频播放的奇妙世界的最佳时机。 我希望这篇文章能让您回想起上次在您最喜欢的流媒体服务上看到缓冲图标时的情景。

6 宜川说