首页 / JAVASCRIPT / js-前端video播放器

js-前端video播放器

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js-前端video播放器，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含11130字，纯文字阅读大概需要16分钟。

内容图文

js-前端video播放器目录

文章目录

前言
推荐阅读
传统播放模式
流媒体
- `Blob`
Blob vs ArrayBuffer
- `Ajax`
`HLS`
- HLS 自适应比特流
- - `m3u8`讲解
  - 文件列表
`DASH`
- 西瓜视频播放器`DASH`例子中的`MPD`文件
`FLV`
播放器截图
`canvas`播放视频

前言

Video, Blob URL
HTTP Range
HLS, DASH
Flv.js
MSE
MP4和Fragmented MP4的区别

传统播放模式

<video id="mse" autoplay=true playsinline controls="controls">
   <source src="https://h5player.bytedance.com/video/mp4/xgplayer-demo-720p.mp4" type="video/mp4">
   你的浏览器不支持Video标签
</video>

视频切片 - `Accept-Ranges`

js-前端video播放器 - 文章图片

HTTP请求响应的状态码是206
request的range: bytes=0-用于检测服务端是否支持Range请求
如果响应中存在Accept-Ranges首部，值不为none，表示该服务器支持范围请求
Accept-Ranges: bytes表示界定范围的单位是bytes
Content-Length：要下载的视频的完整大小

服务器端请求特定的范围

range首部生成该类请求，该首部指示服务器应该返回文件的哪一部分或几部分

单一范围

请求资源的某一部分

js-前端video播放器 - 文章图片

多重范围

range头部支持一次请求文档的多个部分，请求范围用一个逗号分开

$ curl http://www.example.com -i -H "Range: bytes=0-50, 100-150"

Response:

js-前端video播放器 - 文章图片

条件式范围请求

当重新开始请求更多资源片段的时候，必须确保自从上一个片段被接收之后该资源没有进行过修改
「If-Range」 请求首部可以用来生成条件式范围请求：假如条件满足的话，条件请求就会生效，服务器会返回状态码为 206 Partial 的响应，以及相应的消息主体
假如条件未能得到满足，那么就会返回状态码为 「200 OK」 的响应，同时返回整个资源
该首部可以与 「Last-Modified」 验证器或者 「ETag」 一起使用，但是二者不能同时使用

范围请求的响应

三种状态：

在请求成功的情况下，服务器会返回 「206 Partial Content」 状态码。
在请求的范围越界的情况下（范围值超过了资源的大小），服务器会返回 「416 Requested Range Not Satisfiable」 （请求的范围无法满足）状态码。
在不支持范围请求的情况下，服务器会返回 「200 OK」 状态码。

流媒体

一连串的媒体数据压缩后，经过网络分段发送数据，使得数据包得以像流水一样发送
如果不使用此技术，就必须在使用前下载整个媒体文件
两种流式传输方式：顺序流式传输和实时流式传输

js-前端video播放器 - 文章图片

HLS和传统播放的区别

js-前端video播放器 - 文章图片

`Blob`

js-前端video播放器 - 文章图片

Blob vs ArrayBuffer

其实在前端除了 「Blob 对象」 之外，你还可能会遇到 「ArrayBuffer 对象」。它用于表示通用的，固定长度的原始二进制数据缓冲区。你不能直接操纵 ArrayBuffer 的内容，而是需要创建一个 TypedArray 对象或 DataView 对象，该对象以特定格式表示缓冲区，并使用该对象读取和写入缓冲区的内容。

`Ajax`

function GET(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'arraybuffer'; // or xhr.responseType = "blob";
  xhr.send();

  xhr.onload = function(e) {
    if (xhr.status != 200) {
      alert("Unexpected status code " + xhr.status + " for " + url);
      return false;
    }
    callback(new Uint8Array(xhr.response)); // or new Blob([xhr.response]);
  };
}

`HLS`

工作原理是把整个流分成一个个小的基于 HTTP 的文件来下载，每次只下载一些。当媒体流正在播放时，客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源，允许流媒体会话适应不同的数据速率。
当用户的信号强度发生抖动时，视频流会动态调整以提供出色的再现效果

js-前端video播放器 - 文章图片

HLS 自适应比特流

HLS 是一种自适应比特率流协议。因此，HLS 流可以动态地使视频分辨率自适应每个人的网络状况。如果你正在使用高速 WiFi，则可以在手机上流式传输高清视频。但是，如果你在有限数据连接的公共汽车或地铁上，则可以以较低的分辨率观看相同的视频
在开始一个流媒体会话时，客户端会下载一个包含元数据的 Extended M3U（m3u8）Playlist 文件，用于寻找可用的媒体流

js-前端video播放器 - 文章图片

`m3u8`讲解

使用 hls.js 这个 JavaScript 实现的 HLS 客户端，所提供的在线示例，来看一下具体的 m3u8 文件

#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2149280,CODECS="mp4a.40.2,avc1.64001f",RESOLUTION=1280x720,NAME="720"
url_0/193039199_mp4_h264_aac_hd_7.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=246440,CODECS="mp4a.40.5,avc1.42000d",RESOLUTION=320x184,NAME="240"
url_2/193039199_mp4_h264_aac_ld_7.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=460560,CODECS="mp4a.40.5,avc1.420016",RESOLUTION=512x288,NAME="380"
url_4/193039199_mp4_h264_aac_7.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=836280,CODECS="mp4a.40.2,avc1.64001f",RESOLUTION=848x480,NAME="480"
url_6/193039199_mp4_h264_aac_hq_7.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=6221600,CODECS="mp4a.40.2,avc1.640028",RESOLUTION=1920x1080,NAME="1080"
url_8/193039199_mp4_h264_aac_fhd_7.m3u8

文件列表

通过观察 Master Playlist 对应的 m3u8 文件，我们可以知道该视频支持以下 5 种不同清晰度的视频：

1920x1080（1080P）
1280x720（720P）
848x480（480P）
512x288
320x184

不同清晰度视频对应的媒体播放列表，会定义在各自的 m3u8 文件中。这里我们以 720P 的视频为例，来查看其对应的 m3u8 文件：

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-PLAYLIST-TYPE:VOD
#EXT-X-TARGETDURATION:11
#EXTINF:10.000,
url_462/193039199_mp4_h264_aac_hd_7.ts
#EXTINF:10.000,
url_463/193039199_mp4_h264_aac_hd_7.ts
#EXTINF:10.000,
url_464/193039199_mp4_h264_aac_hd_7.ts
#EXTINF:10.000,
...
url_525/193039199_mp4_h264_aac_hd_7.ts
#EXT-X-ENDLIST

当用户选定某种清晰度的视频之后，将会下载该清晰度对应的媒体播放列表（m3u8 文件），该列表中就会列出每个片段的信息
HLS 的传输/封装格式是 MPEG-2 TS（MPEG-2 Transport Stream），是一种传输和存储包含视频、音频与通信协议各种数据的标准格式，用于数字电视广播系统，如 DVB、ATSC、IPTV 等等
需要注意的是利用一些现成的工具，我们是可以把多个 TS 文件合并为 mp4 格式的视频文件
如果要做视频版权保护，那我们可以考虑使用对称加密算法，比如 AES-128 对切片进行对称加密。当客户端进行播放时，先根据 m3u8 文件中配置的密钥服务器地址，获取对称加密的密钥，然后再下载分片，当分片下载完成后再使用匹配的对称加密算法进行解密播放

js-前端video播放器 - 文章图片

`DASH`

基于 HTTP 的动态自适应流（英语：Dynamic Adaptive Streaming over HTTP，缩写 DASH，也称 MPEG-DASH）是一种自适应比特率流技术，使高质量流媒体可以通过传统的 HTTP 网络服务器以互联网传递
不同于 HLS、HDS 和 Smooth Streaming，DASH 不关心编解码器，因此它可以接受任何编码格式编码的内容，如 H.265、H.264、VP9 等
MPD：媒体文件的描述文件（manifest），作用类似 HLS 的 m3u8 文件。
Representation：对应一个可选择的输出（alternative）。如 480p 视频，720p 视频，44100 采样音频等都使用 Representation 描述。
Segment（分片）：每个 Representation 会划分为多个 Segment。Segment 分为 4 类，其中，最重要的是：Initialization Segment（每个 Representation 都包含 1 个 Init Segment），Media Segment（每个 Representation 的媒体内容包含若干 Media Segment）。

js-前端video播放器 - 文章图片

西瓜视频播放器`DASH`例子中的`MPD`文件

<?xml version="1.0"?>
<!-- MPD file Generated with GPAC version 0.7.2-DEV-rev559-g61a50f45-master  at 2018-06-11T11:40:23.972Z-->
<MPD xmlns="urn:mpeg:dash:schema:mpd:2011" minBufferTime="PT1.500S" type="static" mediaPresentationDuration="PT0H1M30.080S" maxSegmentDuration="PT0H0M1.000S" profiles="urn:mpeg:dash:profile:full:2011">
 <ProgramInformation moreInformationURL="http://gpac.io">
  <Title>xgplayer-demo_dash.mpd generated by GPAC</Title>
 </ProgramInformation>

 <Period duration="PT0H1M30.080S">
  <AdaptationSet segmentAlignment="true" maxWidth="1280" maxHeight="720" maxFrameRate="25" par="16:9" lang="eng">
   <ContentComponent id="1" contentType="audio" />
   <ContentComponent id="2" contentType="video" />
   <Representation id="1" mimeType="video/mp4" codecs="mp4a.40.2,avc3.4D4020" width="1280" height="720" frameRate="25" sar="1:1" startWithSAP="0" bandwidth="6046495">
    <AudioChannelConfiguration schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011" value="2"/>
    <BaseURL>xgplayer-demo_dashinit.mp4</BaseURL>
    <SegmentList timescale="1000" duration="1000">
     <Initialization range="0-1256"/>
      <SegmentURL mediaRange="1257-1006330" indexRange="1257-1300"/>
      <SegmentURL mediaRange="1006331-1909476" indexRange="1006331-1006374"/>
      ...
      <SegmentURL mediaRange="68082016-68083543" indexRange="68082016-68082059"/>
    </SegmentList>
   </Representation>
  </AdaptationSet>
 </Period>
</MPD>

`FLV`

js-前端video播放器 - 文章图片

头文件

FLV 头文件：（9 字节）

1-3：前 3 个字节是文件格式标识（FLV 0x46 0x4C 0x56）。
4-4：第 4 个字节是版本（0x01）。
5-5：第 5 个字节的前 5 个 bit 是保留的必须是 0。
- 第 5 个字节的第 6 个 bit 音频类型标志（TypeFlagsAudio）。
- 第 5 个字节的第 7 个 bit 也是保留的必须是 0。
- 第5个字节的第8个bit视频类型标志（TypeFlagsVideo）。
6-9: 第 6-9 的四个字节还是保留的，其数据为 00000009。
整个文件头的长度，一般是 9（3+1+1+4）。

js-前端video播放器 - 文章图片

`flv.js`

flv.js 是用纯 JavaScript 编写的 HTML5 Flash Video（FLV）播放器，它底层依赖于 Media Source Extensions。在实际运行过程中，它会自动解析 FLV 格式文件并喂给原生 HTML5 Video 标签播放音视频数据，使浏览器在不借助 Flash 的情况下播放 FLV 成为可能。
支持播放 H.264 + AAC / MP3 编码的 FLV 文件；
支持播放多段分段视频；
支持播放 HTTP FLV 低延迟实时流；
支持播放基于 WebSocket 传输的 FLV 实时流；
兼容 Chrome，FireFox，Safari 10，IE11 和 Edge；
极低的开销，支持浏览器的硬件加速。

<script src="flv.min.js"></script>
<video id="videoElement"></video>
<script>
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://example.com/flv/video.flv'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
</script>

工作原理

flv.js 的工作原理是将 FLV 文件流转换为 ISO BMFF（Fragmented MP4）片段，然后通过 Media Source Extensions API 将 mp4 段喂给 HTML5 <video> 元素

js-前端video播放器 - 文章图片

播放器截图

利用CanvasRenderingContext2D.drawImage()来实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>播放器截图示例</title>
  </head>
  <body>
    <h3>播放器截图示例</h3>
    <video id="video" controls="controls" width="460" height="270" crossorigin="anonymous">
      <!-- 请替换为实际视频地址 -->
      <source src="https://xxx.com/vid_159411468092581" />
    </video>
    <button onclick="captureVideo()">截图</button>
    <script>
      let video = document.querySelector("#video");
      let canvas = document.createElement("canvas");
      let img = document.createElement("img");
      img.crossOrigin = "";
      let ctx = canvas.getContext("2d");

      function captureVideo() {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        img.src = canvas.toDataURL();
        document.body.append(img);
      }
    </script>
  </body>
</html>

`canvas`播放视频

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用 Canvas 播放视频</title>
  </head>
  <body>
    <h3>使用 Canvas 播放视频</h3>
    <video id="video" controls="controls" style="display: none;">
      <!-- 请替换为实际视频地址 -->
      <source src="https://xxx.com/vid_159411468092581" />
    </video>
    <canvas
      id="myCanvas"
      width="460"
      height="270"
      style="border: 1px solid blue;"
    ></canvas>
    <div>
      <button id="playBtn">播放</button>
      <button id="pauseBtn">暂停</button>
    </div>
    <script>
      const video = document.querySelector("#video");
      const canvas = document.querySelector("#myCanvas");
      const playBtn = document.querySelector("#playBtn");
      const pauseBtn = document.querySelector("#pauseBtn");
      const context = canvas.getContext("2d");
      let timerId = null;

      function draw() {
        if (video.paused || video.ended) return;
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(video, 0, 0, canvas.width, canvas.height);
        timerId = setTimeout(draw, 0);
      }

      playBtn.addEventListener("click", () => {
        if (!video.paused) return;
        video.play();
        draw();
      });

      pauseBtn.addEventListener("click", () => {
        if (video.paused) return;
        video.pause();
        clearTimeout(timerId);
      });
    </script>
  </body>
</html>

此代码最好使用requestAnimationFrame，原因有3，一是setTimeout会导致掉帧，二是性能差，三是绘图卡顿(最好加个离屏canvas)，浏览器的双缓冲机制会出现问题

内容总结

以上是互联网集市为您收集整理的js-前端video播放器全部内容，希望文章能够帮你解决js-前端video播放器所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1021899.html

来源：【匿名】

【上一篇】【JS】下拉联动回显问题【下一篇】javascript 怎么调用php方法

更多 ►

【js-前端video播放器】教程文章相关的互联网学习教程文章

JavaScript -- 音频视频的播放【代码】

首先是音频：<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>播放音频</title></head><body><audiosrc="raw/1.mp3"controls="controls">您的浏览器不支持</audio><buttononclick="clickA()">播放/暂停</button><script>var a = document.getElementById("audio");functionclickA(){if (a.paused){a.play();}else {a.pause;}}</script></body></html>然后是视频：<!D...

html5 js控制音乐播放

<!DOCTYPE HTML><html><head><meta charset="UTF-8"><script language="javascript" type="text/javascript">function autoPlay(){var myAuto = document.getElementById(‘myaudio‘);myAuto.play();}</script></head><body><audio id="myaudio" src="http://www.rrt.dev/pages/qqs.mp3" controls="controls" loop="false" hidden="true" ></audio><input type="button" onclick="autoPlay()" value="播放"/></body></html>原文：...

JavaScript自定义媒体播放器【代码】

使用<audio>和<video>元素的play()和pause()方法，可以手工控制媒体文件的播放。组合使用属性、事件和这两个方法，很容易创建一个自定义的媒体播放器，如下面的例子所示。 1<div class="mediaplayer"> 2<div class="video"> 3<video id="player" src="movie.mov" poster="mymovie.jpg" 4 width="300" height="200"> 5 Video player not available.6</video> 7</div> 8<div class="controls"> 9<input type="button" ...

[JavaScript] HTML5 播放hls流媒体视频流【代码】

在最新版的 Android webview 中不用任何插件，可以直接播放在windows10自带的Edge浏览器可直接播放，PC端 safari浏览器可直接播放PC端chrome，IE，Firefox以及集成以上内核的各种浏览器，以及旧版的Android SDK的webview 不能播放在不能播放的情况下，需要引入hls.js如下示例：<template><div class="camera-module"><div class="video-view"><video ref="video" id="video-rtmp" preload="auto" autoplay="autoplay" muted></vi...

普通选项卡+自动播放功能+向前/向后按钮原生js

今天做了幻灯片，主要功能包括：普通选项卡，向前/向后播放按钮，向前？向后播放功能,自动播放功能要实现简单选项卡功能是没有问题的，但是添加功能就出现各种各样的问题了遇到的问题：1 下标问题 2普通选项卡与向前/向后功能结合的时候冲突，可以向前/向后播放，但是再想实现普通选项卡就出问题了3 添加向前/向后按钮后，html布局下移4 添加向前/向后按钮的时候，我用img标签，显然这个不适用，不能很好的调节垂直居中5 当鼠标放在...

用js获取视频播放时长【代码】

用js实现读取本地mp4文件时长利用h5 video标签加载视频文件，在读取duration就可以了问题在于要更换文件，使用<input type="file" > 标签发现读取的文件路径是隐藏的c:/fakepath/xxx.mp4给video更换src时候会提示找不到文件。。。又找了很久，大多是加载flash控件然后通过flash再取，不太喜欢这么做。如今这H5的时代感觉这个小功能应该不是问题，又想了想，之前做过js读取本地图片在web上做预览，估计读个视频应该也可以所以试了一...

使用javascript实现监控视频播放并打印日志_javascript技巧【图】

最近在做一个项目，要求监控视频的播放事件并能够打印LOG日志，经过一番思索，使用javascript实现了此功能，代码如下： HTML:代码如下:Multi SourceJS:代码如下:window.addEventListener("load",getVideoEvent); function getVideoEvent(){ var videoes=document.getElementsByTagName("video"); for (var i = 0; i showEventLog("video"+(i+1),videoes[i]); } } function showEventLog(videoNum,Media){ eventTester = function(...

使用javascript实现监控视频播放并打印日志

最近在做一个项目，要求监控视频的播放事件并能够打印LOG日志，经过一番思索，使用javascript实现了此功能，代码如下： HTML:代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Multi Source</title> </head> <body> <video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video> <video src="http://www.w3school.com.cn/i/movie.mp4" c...

javascript – 有没有办法在没有Flash Player的情况下播放视频？

有没有办法在没有Flash Player的情况下使用javascript在网页上播放视频？解决方法:您始终可以将Windows Media,Real Player或QuickTime直接嵌入到您的页面中.还有Silverlight,如果你只是想避免使用Flash.如果你不关心它的外观,你可以用Java构建一个低质量的播放器.在某些浏览器上,有HTML 5视频标签,但目前尚未对CODEC进行真正的标准化.

javascript – iPhone：Phonegap：在后台播放音频

我正在使用this Code在Phonegap中以后台模式传输MP3音频文件.但问题是：使用此代码无法使用此代码获取当前位置和所有其他电话间隙功能.我尝试了原生的quicktime / childbrowser方法来播放文件.这很好用,并显示时间线等.但是没有办法隐藏quicktime播放器并在应用程序中浏览,也无法保存位置并在音频文件中设置位置.有什么想法来解决这个问题？解决方法:另一个选择(如果您不害怕开发中的代码)是一个插件,用于在iOS上为PhoneGap传输音频...

javascript-请问我下面的js代码点击下一首按钮的时候怎么播放下一首【图】

我做了个随机播放，然后要做循坏遍历异步返回的歌曲数据时候，本来是要做的效果是点击左右按钮可以播放上一首和下一首，但是结果是点击左边按钮直接播放第一首，而点击右按钮的时候直接就播放了最后一首，谁帮忙给个解决思路，代码如下body{background:deepskyblue;}.container{margin-top:150px;}a{color: #000;}span{font-size: 2.5em;}.music{border:1px #ddd dashed;}.info li{color: red;}.list{border: 1px dashed #ddd;}.ti...

首页 / JAVASCRIPT / js-前端video播放器

js-前端video播放器

内容导读

内容图文

文章目录

前言

推荐阅读

传统播放模式

视频切片 - Accept-Ranges

服务器端请求特定的范围

单一范围

多重范围

条件式范围请求

范围请求的响应

流媒体

Blob

Blob vs ArrayBuffer

Ajax

HLS

HLS 自适应比特流

m3u8讲解

文件列表

DASH

西瓜视频播放器DASH例子中的MPD文件

FLV

头文件

flv.js

工作原理

播放器截图

canvas播放视频

内容总结

内容备注

内容手机端

【js-前端video播放器】教程文章相关的互联网学习教程文章

播放器 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程

视频切片 - `Accept-Ranges`

`Blob`

`Ajax`

`HLS`

`m3u8`讲解

`DASH`

西瓜视频播放器`DASH`例子中的`MPD`文件

`FLV`

`flv.js`

`canvas`播放视频