草庐IT

前端播放大视频卡顿的解决（m3u8视频流）

无知的小菜鸡 2023-07-10 原文

前言

最近在一个大屏看板项目中有一个需求是：要求视频和看板要进行来回切换。
最开始的做法是将MP4视频放在项目里，在本地运行时是没什么问题的，但是在往仓库里提交代码时出现了问题。当单个文件超过100MB时会导致代码提交失败；
后来的解决方案是将视频文件放到服务器上，项目里直接加载视频在服务器上的地址。但是这样也存在一个问题，就是视频加载会卡顿。video标签是边加载边播放，这样造成了视频播放几秒后会加载视频导致视频卡住，影响实际效果。

查询到的解决方案是将mp4视频转换成m3u8视频流的格式进行播放，因此打算尝试一下。下面会分别介绍：
1、将mp4视频转换为m3u8视频流
2、前端如何播放m3u8视频

将mp4视频转换为m3u8视频流

m3u8格式

m3u8是苹果公司推出的视频播放标准，是m3u的一种，只是编码格式采用的是UTF-8。M3U文件是一个记录索引的纯文本文件，打开它时播放软件并不是播放它，而是根据它的索引找到对应的音视频文件的网络地址进行在线播放。

方法/步骤

主流的方式是通过 m3u8格式视频转码工具 FFmpeg 来实现的

下载

从网上找了个百度云下载地址：https://pan.baidu.com/s/1dCK-TrOcUfC6pdKi2Y1e6g
提取码：2pdo

下载完解压后可以在bin文件嘉下看到三个可执行文件，配置好相应的环境变量后即可使用

环境变量配置


在cdm终端里输入：ffmpeg -version，如下图表示安装成功。

常用命令
ffmpeg 常用命令

分割视频
在视频所在的文件夹下打开cmd终端，输入：

 ffmpeg -i video1.mp4 -profile:v  baseline -level 3.0 -start_number 0 -hls_time 1 -hls_list_size 0 -f hls demo.m3u8

  • -i 指定输入的文件名

  • -profile:v baseline 大概意思是档次转成基本画质，有四种画质级别,分别是baseline, extended, main, high，从低到高

  • -level 3.0 大概也是视频画质级别吧，基本上是从1到5,

  • -start_number 0 表示从0开始

  • -hls_time 1 标识每1秒切一个

  • -f hls 将视频转为hls格式

  • -hls_list_size 0 ，设置播放列表保存的最多条目，设置为 0 会保存有所片信息，默认值为5。

其他的命令不清楚，需要什么功能，基本都可以百度到

成功后可以得到下面的文件

注意：
ts文件的切割还与两个帧之间的时间间隔有关，任何一个ts分片的第一帧必须是1帧，否则无法进行播放。因此有时候并不会按照指定的时间进行分割
解决：
既然知道要1秒产生一个ts分片，那就必须产生切片的过程中，强制一秒中产生一个关键帧。设置关键帧间隔，设置间隔为 2 秒的参数如下：-force_key_frames "expr:gte(t,n_forced*2)“

 ffmpeg -i video1.mp4 -force_key_frames "expr:gte(t,n_forced*2)" -profile:v  baseline -level 3.0 -start_number 0 -hls_time 1 -hls_list_size 0 -f hls demo.m3u8

57秒的视频一共生产了30个片段，有可能我理解的还是有些问题，毕竟从来没用用过

如果有播放器的话，将m3u8这个文件拖到播放器里就可以进行播放了

前端播放

前端播放m3u8视频需要借助：video.js 和 videojs-contrib-hls.js

安装依赖

npm install --save video.js
npm install --save videojs-contrib-hls

使用

import 'video.js/dist/video-js.css';
import videojs from 'video.js';
import 'videojs-contrib-hls';

<video id="singleVideo" autoplay="autoplay" class="video-js vjs-default-skin"></video>

this.singlePlayer = videojs('singleVideo',{
    autoplay: true,// 自动播放
    controls: true,// 控件显示
    width: '440',// 视频框宽度
    height: '264',// 视频框高度
    preload: 'auto', //定义视频加载模式
    loop:true, //是否循环播放
});
let res = 'http://61.175.121.73:83/pag/10.13.7.2/7302/33052182001320012936/0/MAIN/TCP/live.m3u8';
if (res) {
    this.singlePlayer.src({ src: res, type: 'application/x-mpegURL' });
    this.singlePlayer.play();
}

video标签上添加的类video-js vjs-default-skin是 videojs上的样式，如果不添加会有显示问题。
videojs的属性和方法应该大部分都是与video标签对应的

效果图

问题

服务器上的视频在播放时有可能会报跨域，例如：

一般是nginx没有配置m3u8的文件格式，可以让运维人员看一下：nginx HLS m3u8播放视频跨域问题

视频流m3u8spanclasstoken前端ffmpeg

有关前端播放大视频卡顿的解决（m3u8视频流）的更多相关文章

  1. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题，今天小编就来解答与大家分享一下动漫制作流程，为了帮助有兴趣的同学理解，大多数人会选择动漫培训机构，那么今天小编就带大家来看看动漫制作要掌握哪些技巧？一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性，以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料，可以是手绘也可以是3d软件创建。在此步骤中，要注意的问题是色彩和平面布局。三、动漫制作制作完成后，加工成型。完成不同的表现形式后，就要对设计稿进行加工处理，使加工的难易度降低，并得到一些基本准确的概念，以便于后续的大样、准确的尺寸制定。四、

  2. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  3. TimeSformer：抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  4. ruby - 如何更改此正则表达式以从未指定 v 参数的 Youtube URL 获取 Youtube 视频 ID？ - 2

    目前我正在使用这个正则表达式从YoutubeURL中提取视频ID:url.match(/v=([^&]*)/)[1]我怎样才能改变它，以便它也可以从这个没有v参数的YoutubeURL获取视频ID:http://www.youtube.com/user/SHAYTARDS#p/u/9/Xc81AajGUMU感谢阅读。编辑:我正在使用ruby​​1.8.7 最佳答案 对于Ruby1.8.7，这就可以了。url_1='http://www.youtube.com/watch?v=8WVTOUh53QY&feature=feedf'url

  5. ruby-on-rails - 在 Rails 应用程序的前端获取实时日志 - 2

    在Rails3.x应用程序中，我正在使用net::ssh并向远程pc运行一些命令。我想向用户的浏览器显示实时日志。比如，如果两个命令在net中运行::ssh执行即echo"Hello",echo"Bye"被传递然后"Hello"应该在执行后立即显示在浏览器中。这是代码我在ruby​​onrails应用程序中使用ssh连接和运行命令Net::SSH.start(@servers['local'],@machine_name,:password=>@machine_pwd,:timeout=>30)do|ssh|ssh.open_channeldo|channel|channel.requ

  6. ruby - 如何在转换器插件中访问页面属性(YAML 前端) - 2

    我正在为Jekyll编写一个转换器插件，需要访问一些页眉(YAML前端)属性。只有内容被传递给主要的转换器方法，似乎无法访问上下文。例子:moduleJekyllclassUpcaseConverter关于如何在转换器插件中访问页眉数据有什么想法吗？ 最佳答案 基于Jekyll源代码，无法在转换器中检索YAML前端内容。根据您的情况，我看到了两种可行的解决方案。您的文件扩展名可以具有足够的描述性，以提供您本应包含在前言中的信息。看起来Converter插件的设计就是这么基本的。如果修改Jekyll是一个选项，您可以更改Convert

  7. 续集来了丨UI自动化测试（二）：带视频，实在RPA高效进行web项目UI自动化测试 - 2

    一、什么是web项目ui自动化测试？通过测试工具模拟人为操控浏览器，使软件按照测试人员的预定计划自动执行测试的一种方式，可以完成许多手工测试无法完成或者不易实现的繁琐工作。正确使用自动化测试，可以更全面的对软件进行测试，从而提高软件质量进而缩短迭代周期。二、构建测试用例的“九部曲”（一）创建流程包划分功能模块日常测试活动中，都会根据功能模块进行拆分，所以在设计器中我们可以通过创建流程包的方式来拆分需要测试的功能模块，如下图中操作创建一个电脑流程包并且取名为对应的功能模块名称，如果有多个功能模块就创建多个对应的流程包，实在RPA设计器有易用的图形可视化界面，方便管理较多的功能模块。（二）在流程包

  8. Java调用ffmpeg处理视频，并记录下遇到的坑 - 2

    目录需求基于JavaCV跨平台执行ffmpeg命令[^1]坑一内存不足坑二多个ffmpeg进程并行导致IO负载大，进而导致ioerror?坑三使用Java操作ffmpeg时，有时会卡死坑四Process的waitFor死锁问题及解决办法需求给透明背景的视频自动叠加一张背景图片基于JavaCV跨平台执行ffmpeg命令1我测试发现的本需求的最小依赖：dependency>groupId>org.bytedecogroupId>artifactId>ffmpeg-platform-gplartifactId>version>5.0-1.5.7version>dependency>核心代码：Stri

  9. 基于python的短视频智能推荐/django的影视网站/视频推荐系统 - 2

    摘要本论文主要论述了如何使用Python技术开发一个短视频智能推荐，本系统将严格按照软件开发流程进行各个阶段的工作，采用B/S架构，面向对象编程思想进行项目开发。在引言中，作者将论述短视频智能推荐的当前背景以及系统开发的目的，后续章节将严格按照软件开发流程，对系统进行各个阶段分析设计。 短视频智能推荐的主要使用者分为管理员和用户，实现功能包括管理员：首页、个人中心、用户管理、热门视频管理、用户上传管理、系统管理，用户：首页、个人中心、用户上传管理、我的收藏管理，前台首页；首页、热门视频、用户上传、公告信息、个人中心、后台管理等功能。由于本网站的功能模块设计比较全面，所以使得整个短视频智能推荐信

  10. 前端实现文件上传（点击+拖拽） - 2

    一、简介之前在Vue项目中使用过element的上传组件，实现了点击上传+拖拽上传的两种上传功能。然后我就在想是否可以通过原生的html+js来实现文件的点击上传和拖拽上传，说干就干。首先是点击获取上传文件自然没的说，只需要借助input标签即可，但原生的点击上传按钮，实在是过于简陋，所以我的想法是通过一个div，模拟成上传按钮，然后监听其点击事件，通过input.click()去模拟点击真正的上传元素。然后是拖拽获取上传文件，这个稍有难度，我的想法是通过HTML5新增的drag拖放API+dataTransfer来实现文件的拖拽获取，但是由于是html5新增的，所以可能在某些低版本IE浏览器

随机推荐