video.js播放rtmp直播源和hls直播源

最新推荐文章于 2025-06-24 09:08:17 发布

quan!!!

最新推荐文章于 2025-06-24 09:08:17 发布

阅读量6.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：网页直播文章标签： video.js rtmp hls

本文链接：https://blog.youkuaiyun.com/qq_40816360/article/details/84071977

网页直播专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍如何使用video.js在网页中播放RTMP和HLS视频流，包括确保Chrome浏览器允许播放Flash，搭建本地服务器进行测试，以及修改源地址。同时提供了具体的HTML代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看了很多网上的坑，都是无法播放的，这次自己亲测能播放
注意如果是自己制作的源的话，在推流之后要先等一小会才可以播放

video.js播放rtmp源

一定要注意你的Chrome浏览器允许播放flash，因为rtmp是基于flash的，设置可以从百度查询如何设置chrome浏览器允许播放flash
要放在服务器下，打开此html页面才可以播放，最简单就是自己搭个本地服务器进行
自己测试的时候，把source的src修改成自己的源就好了
type是 rtmp/flv

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>video.js</title>
    <link href="https://unpkg.com/video.js@6.11.0/dist/video-js.min.css" rel="stylesheet">
    <script src="https://unpkg.com/video.js@6.11.0/dist/video.min.js"></script>
    <script src="https://unpkg.com/videojs-flash/dist/videojs-flash.js"></script>
    <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
  </head>
  <body>
    <video id="my-player" class="video-js" controls>
        <source src="rtmp://localhost:1935/myapp/pc" type="rtmp/flv">
        <p class="vjs-no-js">
          not support
        </p>
    </video>
    <script type="text/javascript">
      var player = videojs('my-player',{
        width:400,
        heigh:200
      });
    </script>
  </body>
</html>

video.js播放hls源

这个不一定要放在服务器上，如果直接打开不可以的话，也可以放在服务器上测试一下
type是 application/x-mpegURL

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>video.js</title>
    <link href="https://unpkg.com/video.js@6.11.0/dist/video-js.min.css" rel="stylesheet">
    <script src="https://unpkg.com/video.js@6.11.0/dist/video.min.js"></script>
    <script src="https://unpkg.com/videojs-flash/dist/videojs-flash.js"></script>
    <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
  </head>
  <body>
    <video id="my-player" class="video-js" controls>
        <source src="http://localhost:8765/hls/movie.m3u8" type="application/x-mpegURL">
        <p class="vjs-no-js">
          not support
        </p>
    </video>
    <script type="text/javascript">
      var player = videojs('my-player',{
        width:400,
        heigh:200
      });
    </script>
  </body>
</html>