前端播放m3u8格式视频

92 阅读 0 评论 61 点赞

我是靠谱客的博主舒服眼睛，最近开发中收集的这篇文章主要介绍前端播放m3u8格式视频，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、前端播放m3u8格式视频

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>前端播放m3u8格式视频</title>
<!--https://www.bootcdn.cn/video.js/-->
<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>
<!--https://www.bootcdn.cn/videojs-contrib-hls/-->
<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="http://ivi.bupt.edu.cn/hls/cctv1hd.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>

二、ffmpeg之将rtsp流地址切片成为m3u8

windows 使用 ffmpeg 命令：

ffmpeg -i "rtsp://192.168.1.192:554/openUrl/FfAtLDq" -fflags flush_packets -max_delay 2 -flags -global_header -hls_time 2 -hls_list_size 3 -vcodec copy -y D:videosvideo.m3u8

绿色是rtsp流地址

红色是切片后的文件的路径

linux使用的命令

ffmpeg -i "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" -fflags flush_packets -max_delay 2 -flags -global_header -hls_time 2 -hls_list_size 3 -vcodec copy -y /usr/local/nginx/html/second/video.m3u8

绿色是rtsp流地址

红色是切片后的文件的路径

代码实现（注意：因为代码制定ffmpeg.exe 命令里面不需要 ffmpeg -i rts... 直接 -i rtst... 即可）

class Program
{
static void Main(string[] args)
{
string para = " -i rtsp://113.136.42.45:554/PLTV/88888888/224/3221226087/10000100000000060000000001759104_0.smil -fflags flush_packets -max_delay 2 -flags -global_header -hls_time 2 -hls_list_size 3 -vcodec copy -y D:\video.m3u8";
Process proc = new Process();
proc.StartInfo.FileName = @".ffmpegffmpeg.exe ";
proc.StartInfo.Arguments = para;
proc.StartInfo.UseShellExecute = false;
proc.StartInfo.CreateNoWindow = false;
proc.StartInfo.RedirectStandardOutput = true; //重定向输出

proc.StartInfo.WindowStyle = ProcessWindowStyle.Hidden;
proc.Start();
Console.WriteLine(proc.Id);
proc.Dispose();
Console.ReadLine();
}
}