前端播放rtsp、rtmp、hls

最新推荐文章于 2024-03-30 22:21:26 发布

Yuan_KL

最新推荐文章于 2024-03-30 22:21:26 发布

阅读量2.9k

点赞数

分类专栏：前端文章标签： javascript rtmp rtsp hls

本文链接：https://blog.csdn.net/Sailing_Yuan/article/details/106825435

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

2020-06-18 亲测可用

rtsp

方案一 vlc

rtsp使用vlc插件，我使用的是vlc-3.0.11-win32.exe版本的

<!DOCTYPE html>
<html>

<head>
	<title>VLC 测试</title>
</head>

<body>
	<!--将<embed>标签嵌入<object>标签内部之后可以同时兼容IE和火狐-->
	<object classid="clsid:E23FE9C6-778E-49D4-B537-38FCDE4887D8"
		codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" width="640" height="480"
		events="True" id="vlc1">
		<!-- <param name="MRL" value="udp://@239.255.1.1:1234" />    -->
		<param name="ShowDisplay" value="True" />
		<param name="Loop" value="False" />
		<param name="AutoPlay" value="True" />
		<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" width="640" height="480"
			src="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov" ; id="vlc">
		</embed>
	</object>
</body>

</html>

方案二 Ffmpeg+Node.js+jsmpeg

连接地址 https://www.jianshu.com/p/8e88e23e2409
需要改下 jsmpeg-master-view-stream.html 中的路径 localhost不行就改成192的

localhost不行就改成192的

在执行：ffmpeg -i “你的rtspurl” -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret 的时候可能会报下面这个错误
在这里插入图片描述
我是运行这句话解决的：ffmpeg -i “你的rtspurl” -r 30 -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret

rtmp

vue播放rtmp https://www.jianshu.com/p/42c054014eda
谷歌需要允许 Flash 不是长久的方案（Adobe将于12月31日终止支持Flash 意味着谷歌也将停止对Flash的支持）

在这里插入图片描述

rtmp视频地址

rtmp://58.200.131.2:1935/livetv/dftv （东方卫视）
rtmp://58.200.131.2:1935/livetv/gdtv （广东卫视）
rtmp://58.200.131.2:1935/livetv/hunantv （湖南卫视）

hls

第一种方案

HTML5点播m3u8(hls)格式视频

npm install --save hls.js


<video ref="videoRef" width="400" controls></video>

<script>
import Hls from 'hls.js'; 

export default {
    data () {
        return {
            //
        }
    },
    mounted: function() {
      var hls = new Hls();
      hls.loadSource('http://ivi.bupt.edu.cn/hls/cctv14hd.m3u8');
      hls.attachMedia(this.$refs.videoRef);
      hls.on(Hls.Events.MANIFEST_PARSED,function() {
        this.$refs.videoRef.play();
      });
    }
}
</script>

第二种方案


<!DOCTYPE html>
<html lang="en">
<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://114.55.107.120:8080/static/video/chenl001.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>

hls视频地址

http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8 （cctv1）
http://ivi.bupt.edu.cn/hls/cctv2hd.m3u8 （cctv2）
http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8 （cctv6）

Yuan_KL

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端播放rtsp、rtmp、hls

rtsp方案一 vlcrtsp使用vlc插件，我使用的是vlc-3.0.11-win32.exe版本的<!DOCTYPE html><html><head> <title>VLC 测试</title></head><body>  <object classid="clsi
复制链接

扫一扫