1.準備
nginx-1.7.11.3-Gryphon下載下傳
連結：https://pan.baidu.com/s/1EANAajsoGQcvjfphAuOoRQ
提取碼：lhwb
nginx.conf
連結：https://pan.baidu.com/s/1IX26h92tUHD4XV5T4qygDw
提取碼：c0z4
複制這段内容後打開百度網盤手機App，操作更友善哦
ffmpeg
連結：https://pan.baidu.com/s/1oh_36qFxnLW5Kmdf8F5eTQ
提取碼：rsdn
複制這段内容後打開百度網盤手機App，操作更友善哦
解壓nginx-1.7.11.3-Gryphon，把下載下傳的nginx.conf，複制到nginx-1.7.11.3-Gryphon下的conf中，記得端口号是5080
2.ffmpeg環境搭建
檢視是否安裝成功
3.轉碼推流
因MP4需要全部加載完才能播放，是以這裡采用m3u8格式
首先保證，nginx已經啟動完成，啟動完成可以通過這樣測試
轉碼指令：
ffmpeg -i "rtsp://admin:[email protected]:554/Streaming/Channels/101?transportmode=unicast" -c copy -f hls -hls_time 5 -hls_list_size 6 -hls_wrap 5 d:\project\direct\40\camera.m3u8
成功後，對應的這個目錄會有檔案生成
4.前端代碼
前端需要解決浏覽器相容問題，下面的代碼是谷歌版本，ie需要使用flash，需要前端做對應的浏覽器識别代碼
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>java交流群 828638052 前端播放m3u8格式視訊</title>
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" target="_blank" rel="external nofollow" rel="stylesheet">
<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script>
<!-- videojs-contrib-hls 用于在電腦端播放 如果隻需手機播放可以不引入 -->
</head>
<body>
<style>
.video-js .vjs-tech {position: relative !important;}
</style>
<div>
<video id="myVideo" muted class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
<source id="source" src="http://192.168.7.55:5080/images/camera.m3u8" type="application/x-mpegURL"></source>
</video>
</div>
<div class="qiehuan" style="width:100px;height: 100px;background: red;margin:0 auto;line-height: 100px;color:#fff;text-align: center">切換視訊</div>
</body>
<script>
// videojs 簡單使用
var myVideo = videojs('myVideo', {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
})
myVideo.play()
var changeVideo = function (vdoSrc) {
if (/\.m3u8$/.test(vdoSrc)) { //判斷視訊源是否是m3u8的格式
myVideo.src({
src: vdoSrc,
type: 'application/x-mpegURL' //在重新添加視訊源的時候需要給新的type的值
})
} else {
myVideo.src(vdoSrc)
}
myVideo.load();
myVideo.play();
}
var src = 'http://192.168.7.55:5080/images/camera.m3u8';
document.querySelector('.qiehuan').addEventListener('click', function () {
changeVideo(src);
})
</script>
注意：http://192.168.7.55:5080/images/camera.m3u8 這個位址是nginx對應伺服器
images 是反向代理，映射到本地D:\project\direct\40，不然會有跨域的問題，導緻視訊無法正常播放
nginx.conf裡面的配置，這裡就不過多的闡述勒。詳細配置找度娘
點選連結加入群聊【java交流群】：https://jq.qq.com/?_wv=1027&k=5VZxg3k