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

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

video.js播放rtmp源

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

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>video.jstitle>
    <link href="https://unpkg.com/[email protected]/dist/video-js.min.css" rel="stylesheet">
    <script src="https://unpkg.com/[email protected]/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源

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

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>video.jstitle>
    <link href="https://unpkg.com/[email protected]/dist/video-js.min.css" rel="stylesheet">
    <script src="https://unpkg.com/[email protected]/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>

至于怎么制作源可以参考我的另外的博客
https://blog.csdn.net/qq_40816360/article/details/84037877

你可能感兴趣的:(网页直播)