如何将一个视频分割成多个ts文件和一个m3u8格式的文件并在项目中播放

785 阅读1分钟

一、使用FFmpeg工具

1、视频同级目录下执行命令: ffmpeg -i ippwss.mp4 -c copy -map 0 -f segment -segment_time 120 -segment_list output.m3u8 output%03d.ts

2、将分割好的ts文件上传服务器,把服务器返回的ts路径替换到m3u8里的视频列表并上传m3u8文件

二、前端如何播放m3u8格式的文件

1、安装video.js和videojs-contrib-hls插件

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

2、在组件中引入video.js和videojs-contrib-hls.js 或 hls.js

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

3、在组件中使用video标签

<template> 
    <div> 
        <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"> <source src="http://example.com/path/to/video.m3u8" type="application/x-mpegURL"> </video> 
    </div>
</template>

4、调用

mounted() {
  //videojs写法
  var player = videojs('my-video');
  player.play();
  //hls写法
  var video = this.$refs.video;
  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(this.src);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function () {
      video.play();
    });
   } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = this.src;
      video.addEventListener('loadedmetadata', function () {
        video.play();
      });
    }
}