Nginx+rtmp web拉流

最新推荐文章于 2024-07-12 11:09:26 发布

果vinegar

最新推荐文章于 2024-07-12 11:09:26 发布

阅读量3.3k

点赞数 1

分类专栏：音视频文章标签： Windows+Nginx+Rmtp 拉流Web Vedio.js 视频流

本文链接：https://blog.csdn.net/yeluo_vinager/article/details/98731289

版权

音视频专栏收录该内容

5 篇文章 0 订阅

订阅专栏

拉流播放

H5的vedio标签就可以实现播放，pc不支持m3u8，这里用到video.js

下载地址：https://github.com/videojs/video.js

下载源文件打包出我们需要的文件

这里已经打包好了：https://download.csdn.net/download/yeluo_vinager/11423332

编写脚本

<!DOCTYPE html>  
<link href="video-js.min.css" rel="stylesheet">
<script src="video.min.js"></script>
<video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"
    data-setup='{}'>
	 <source
     src="http://10.255.78.136:8070/home.m3u8"
     type="application/x-mpegURL">
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="http://videojs.com/html5-video-support/" target="_blank">
      supports HTML5 video
    </a>
  </p>
</video>
<script>
var player = videojs('my-player');
var options = {};
 
var player = videojs('my-player', options, function onPlayerReady() {
  videojs.log('Your player is ready!');
 
  // In this context, `this` is the player that was created by Video.js.
  this.play();
 
  // How about an event listener?
  this.on('ended', function() {
    videojs.log('Awww...over so soon?!');
  });
});
</script>

讲网页部署到Nginx下html 下运行Nginx，使用ffmpeg推流后打开网页拉流

如果在线拉流测试还可以使用以下方式，代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>视频流播放测试</title>
    <script src="https://cdn.bootcss.com/hls.js/0.12.4/hls.min.js"></script>
</head>
<body>
    <video controls src="" id="video" style="width: 400px;height: 400px"></video>
    <script>
         var video = document.getElementById('video');
          if(Hls.isSupported()) {
            var hls = new Hls();
            hls.loadSource('http://10.255.78.136:8070/home.m3u8');
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED,function() {
              video.play();
          });
         } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            video.src = 'http://10.255.78.136:8070/home.m3u8';
            video.addEventListener('loadedmetadata',function() {
              video.play();
            });
          }
    </script>
</body>
</html>