前端--video大视频播放（m3u8）

拿回忆下酒

已于 2023-11-22 09:54:35 修改

阅读量2w

点赞数 7

文章标签： m3u8 video ffmpeg 前端视频播放

于 2021-01-05 11:49:50 首次发布

本文链接：https://blog.csdn.net/qq_38998250/article/details/112184011

版权

m3u8视频播放

区别
- mp4
- m3u8
ffmpeg
demo
github地址

区别

视频播放是前端非常常见的一个功能需求，一般使用mp4格式，通过video标签播放就好。

网上对于视频播放的文章也非常多，但是mp4格式只适合一些小视频，例如一些几百兆，几个G 的视频，就不适合了。

mp4

mp4是媒体文件，如果视频过大，加载速度慢，而且即便暂停视频，也会持续加载。

m3u8

m3u8文件是ts流文件的媒体路径和其他信息,可以直接快速切换到对应的时间段查看。

ffmpeg

想直接使用m3u8文件，还需要对视频格式进行转码，这里就需要借助ffmpeg，windows下安装方式自行百度，这里我以Mac 为例，描述一下具体步骤。

安装homebrew

想安装 ffmpeg 还需要安装homebrew，具体步骤戳这里~

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

安装ffmpeg

brew instaill ffmpeg

安装完成后，可以通过 ffmpeg -version 查看版本，看看是否正常。

MP4 转 m3u8

没有video 文件夹的话，记得提前创建 mkdir video

第一种

//转mp4为ts
ffmpeg -y -i /Users/xxx/xxx/testxxx.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb /Users/xxx/xxx/testxxx.ts

//对ts进行切片每5秒为一个片段
ffmpeg -i /Users/xxx/xxx/testxxx.ts -c copy -map 0 -f segment -segment_list /Users/xxx/xxx/video/index.m3u8 -segment_time 5 /Users/xxx/xxx/video/nxb-%04d.ts

第二种

ffmpeg -i /Users/xxx/xxx/testxxx.mp4 -c copy -map 0 -f segment -segment_list /Users/xxx/xxx/video/index.m3u8 -segment_time 6 /Users/xxx/xxx/video/nxb-%04d.ts

常用命令

示例	意义
-i url （输入）	输入文件网址
-y（glodal）	无需询问即可覆盖输出文件
-c [:stream_specifier]	编解码器（输入/输出，每个流）
copy	复制而无需重新编码
-map	用于手动控制每个输出文件中的流选择
-segment_time	切片ts文件播放时间，单位秒
%04d.ts	表示从1开始用0补全的4位整数为文件名的ts文件序列。如果想要序列文件名为testt_001.ts等等的话，就是test_%03d.ts

ffmpeg中文文档

ffmpeg实用命令

demo

视频格式转换完成，就需要运行一下demo，看看效果如何了。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>前端播放m3u8格式视频</title>
    <link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/video.js/6.6.2/video.js"></script>
    <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
</head>
<body>
  <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1080" height="708" data-setup='{}'>    
      <source id="source" src="./index.m3u8"  type="application/x-mpegURL">
  </video>
</body>
<script>    
  // videojs 简单使用  
  var myVideo = videojs('myVideo',{
      bigPlayButton : true, 
      textTrackDisplay : false, 
      posterImage: false,
      errorDisplay : false,
  })
  myVideo.play() // 视频播放
  myVideo.pause() // 视频暂停
</script>
</html>

gulpfile.js

 var gulp  = require ('gulp'),
    $=require("gulp-load-plugins")(),
    open = require("gulp-open");


const address = require('address');
const localhost = address.ip() || 'localhost';


//开启服务器
gulp.task("webserver",function () {
  $.connect.server({
    port : "3333",
    livereload : true,
    root: "./",
    host:localhost
  })
});

gulp.task('open', function(){
  gulp.src('./')
  .pipe(open({
    uri:'http://'+localhost+':3333'
  }));
});



gulp.task("dev",["webserver","open"]);

package.json

{
  "name": "dome",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "dev": "gulp dev",
    "build": "gulp build"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "address": "^1.1.2",
    "gulp": "^3.9.1",
    "gulp-connect": "^5.0.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-open": "^3.0.1"
  }
}

github地址

github地址具体代码

拿回忆下酒

关注

7
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
前端--video大视频播放（m3u8）

m3u8视频播放区别mp4m3u8ffmpeg安装homebrew安装ffmpeg区别视频播放是前端非常常见的一个功能需求，一般使用mp4格式，通过video标签播放就好。网上对于视频播放的文章也非常多，但是mp4格式只适合一些小视频，例如一些几百兆，几个G 的视频，就不适合了。mp4mp4是媒体文件，如果视频过大，加载速度慢，而且即便暂停视频，也会持续加载。m3u8m3u8文件是ts流文件的媒体路径和其他信息,可以直接快速切换到对应的时间段查看。ffmpeg想直接使用m3u8文件，还需要
复制链接

扫一扫