浅析浏览器 Web 视频播放器

音视频前置知识

视频，是一系列连续播放的图片。

码率，也叫比特率，是每秒视频的 bit 数，决定了视频是否清晰。比特率越高，压缩比越小，视频越清晰。

100min/1080P/1GB的视频的比特率：

// 帧率为 (数据量/时间)
8589934592/6000 = 1.4Mbit/s

每秒播放的图片数就是视频的帧率。

如果视频（图片）的的尺寸是 1920*1080，即一张图片的尺寸是 1920*1080*3 bytes，乘3是因为一个像素点3个比特，分别存放R，G，B，那么帧率60的1920 * 1080 视频，1 min 所需要的存储空间：

1920 * 1080 * 3 * 60 * 60 = 20.85GB

如此之大，所以视频需要编码(codec)压缩。不同的编码格式压缩率不同，常见的编码格式有 h264，mpeg4，vp8等。

视频和图片均具有以下特点：

• 空间冗余：图像的相邻像素之间有较强的相关性，一张图片相邻像素往往是渐变的，不是突变的，没必要每个像素都完整地保存，可以隔几个保存一个，中间的用算法计算出来。
• 时间冗余：视频序列的相邻图像之间内容相似。一个视频中连续出现的图片也不是突变的，可以根据已有的图片进行预测和推断。
• 视觉冗余：人的视觉系统对某些细节不敏感，因此不会每一个细节都注意到，可以允许丢失一些数据。
• 编码冗余：不同像素值出现的概率不同，概率高的用的字节少，概率低的用的字节多，类似霍夫曼编码（Huffman Coding）的思路。

帧率和分辨率都可以影响视频体积，帧率是主要因素，一般来说主流视频平台的帧率在1Mbit/s左右。

由于编码格式是有版权问题的，所以不同的浏览器支持的编码格式不同，就会出现有些编码格式的视频在某些浏览器播放不了，或者只有声音没有画面。主流浏览器支持的视频编码格式是h264。

一个视频文件内会包含视频流和音频流，还有一些元数据，例如分辨率信息，标题等，这个文件的格式我们称为封装格式，可以理解为打包格式，常见的 mp4，webp，mov，mpeg。封装格式往往是与视频编码无关的，所以会出现同样都是 mp4文件，某些浏览器播放不了。

音频标签是 audio、视频标签是 video。

<video controls poster="1.jpg" src="1.mp4" loop muted></video>
<audio controls src="1.mp3"></audio>

其中，src指定资源地址，poster为视频指定一张封面图，controls表示浏览器应该显示UI控件（每个浏览器样式不同）。

video 和 audio 通用事件 ：

video 的常用方法： 

• play() 控制视频开始播放；
• pause() 控制视频暂停播放。

操作音视频必备工具-FFMPEG

FFMPE是音视频处理最常用的开源软件，安装FFMPEG：

• Mac
• Windows
• Linux

使用文档参考官网：FFmpeg

播放器实现

使用原生组件进行实现，重点关注业务逻辑。思路如下：

• 该组件接收一个视频的src作为参数；
• 监听 onLoadedMetadata事件，获取视频时长(duration)和真实宽（videoWidth）高 （videoHeight）；
• 点击播放/暂停时，调用视频元素的 play/pause 方法；
• 播放时，监听 onTimeUpdate，获取当前播放时间(currentTime)，计算出进度条的进度；
• 拖动进度条，设置视频当前播放时间，与步骤 4 相反；
• 视频初始加载时，显示loading。即组件初次渲染时，loading 属性默认为 true,即显示加载效果，当视频元数据加载时，取消 loading；
• 视频卡顿时，显示 loading，监听的 onWaiting事件；不卡顿时，取消 loading，监听的是 onCanPlay事件。

.video-wrapper{
    width:800px;
}
.video-wrapper>video{
    width: 100%;
}

.video-controls{
    margin-top: 20px;
}

function formatDuration(duration) {
    var sec_num = parseInt(duration, 10);
    var hours   = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    if (hours   < 10) {hours   = "0"+hours;}
    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}
    return hours+':'+minutes+':'+seconds;
}

import React, { createRef, useState } from 'react'
import './VideoPlayer.css'
function VideoPlayer({src}){
    const videoDom=createRef()
    // 视频当前播放时间
    const [curTime,setCurTime]=useState(0)
    // 视频时长
    const [duration,setDuration]=useState(0)
    // 视频状态，是否暂停
    const [isPause,setPause]=useState(true)
    // 视频真是尺寸
    const [size,setSize]=useState({width:1920,height:1080})
    // 视频加载中
    const [waiting,setWaiting]=useState(true)

    // 视频元数据加载成功
    const onLoad=(e)=>{
        const {duration,videoWidth,videoHeight}=e.target
        setDuration(duration)
        setSize({width:videoWidth,height:videoHeight})
        setWaiting(false)
    }
    // 控制播放暂停
    const handlePlay=(play)=>{
        const v=videoDom.current
        if(play){
            setPause(false)
            v.play()
        }else{
            setPause(true)
            v.pause()
        }

    }
    // 拖动slider时改变视频currentTime
    const onSliderChange=(e)=>{
        setCurTime(e.target.value)
        videoDom.current.currentTime=e.target.value

    }
    // 监听video timeupdate
    const onTimeUpdate=()=>{
        const v=videoDom.current
        setCurTime(v.currentTime)
        if(v.ended){
            handlePlay(false)
            v.currentTime=0
        }
    }
    // 卡顿时，显示加载中提示
    const onWaiting=()=>{
        setWaiting(true)
    }
    // 可以播放时，隐藏加载中提示
    const onCanPlay=()=>{
        setWaiting(false)
    }
    return <div className="video-wrapper">
            <video ref={videoDom}  src={src} onLoadedMetadata={onLoad} onTimeUpdate={onTimeUpdate} onWaiting={onWaiting} onCanPlay={onCanPlay}  ></video>
            {/* 视频加载时显示loading */}
            {waiting && <div className="waiting">loading...</div>}
            <div className="video-controls">
                {/* 播放按钮 */}
                {isPause? <button onClick={()=>{handlePlay(true)}}>播放</button>: <button onClick={()=>{handlePlay(false)}}>暂停</button>}
                {/* 进度条 */}
                <input type="range" min="0" max={duration}  value={curTime} onChange={onSliderChange}/>
                {/* 时间信息和分辨率信息 */}
                <span>{formatDuration(curTime)}/{formatDuration(duration)}</span>
                <span>分辨率：{size.width}x{size.height}</span>
            </div>
        </div>
}
export default VideoPlayer;