how can i get the flvPlayer?

zhuozhao commented 5 years ago

how can i get the flvPlayer? I use the flvPlayer to add erro event; like this : flvPlayer.on('error', (err) => { if (err === 'NetworkError') { console.log('资源请求出错'); } });

t0pu commented 4 years ago

I use this to get statistics info. Should work for errors to.

var player = videojs('my-video', {
  "flvjs": {
      "mediaDataSource": {
        "isLive": true,
        "cors": true,
        "withCredentials": false,
      }
    }
}, function onPlayerReady() {
  videojs.log('Your player is ready!');

  this.play();

  this.tech({ IWillNotUseThisInPlugins: true }).flvPlayer.on(flvjs.Events.STATISTICS_INFO, (metadata) => console.log(metadata));
});

See https://github.com/bilibili/flv.js/blob/master/docs/api.md#flvjsevents for a list of events.

ChenJiaH commented 4 years ago

I only get Html5 by this.tech({ IWillNotUseThisInPlugins: true }). video.js => 7.6.6 videojs-flvjs => 0.2.0

t0pu commented 4 years ago

Please make sure this refers to the correct object. In this case it should be the player object. Also when accessing the tech from outside the onPlayerReady function like player.tech({ IWillNotUseThisInPlugins: true }).flvPlayer make sure, that the video.js player is properly initialized and ready when accessing it like that. This is why I put that inside the onPlayerReady function in the first place.

Here is the complete working test page for the snippet from my last comment:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>videojs</title>
    <link href="https://unpkg.com/video.js@7.7.5/dist/video-js.min.css" rel="stylesheet" />
  </head>
  <body>
    <video-js
      id="my-video"
      class="video-js"
      controls
      autoplay
      preload="none"
      data-setup=""
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    >
      <source src="movie.flv" type="video/x-flv" />

      <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
      </p>
    </video-js>

    <script src="https://unpkg.com/video.js@7.7.5/dist/video.min.js"></script>
    <script src="https://unpkg.com/flv.js@1.5.0/dist/flv.min.js"></script>
    <script src="https://unpkg.com/videojs-flvjs@0.2.0/dist/videojs-flvjs.min.js"></script>

    <script>
      var player = videojs(
        "my-video",
        {
          flvjs: {
            mediaDataSource: {
              isLive: true,
              cors: true,
              withCredentials: false,
            },
          },
        },
        function onPlayerReady() {
          videojs.log("Your player is ready!");

          this.play();

          this
            .tech({ IWillNotUseThisInPlugins: true })
            .flvPlayer.on(flvjs.Events.STATISTICS_INFO, (metadata) =>
              console.log(metadata)
            );
        }
      );
    </script>
  </body>
</html>

ChenJiaH commented 4 years ago

Thanks... If there is no <source /> at the beginning, flvPlayer will not be found. In my case, i need to initialize the player first, and then dynamically set the video like this:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>videojs</title>
    <link href="https://unpkg.com/video.js@7.7.5/dist/video-js.min.css" rel="stylesheet" />
</head>

<body>
    <video-js id="my-video" class="video-js" autoplay muted preload="auto" data-setup="">
    </video-js>

    <script src="https://unpkg.com/video.js@7.7.5/dist/video.min.js"></script>
    <script src="https://unpkg.com/flv.js@1.5.0/dist/flv.min.js"></script>
    <script src="https://unpkg.com/videojs-flvjs@0.2.0/dist/videojs-flvjs.min.js"></script>

    <script>
        var player = videojs(
            "my-video",
            {
                controls: false,
                bigPlayButton: false,
                autoplay: 'muted',
                preload: 'auto',
                width: 800,
                height: 640,
                flvjs: {
                    mediaDataSource: {
                        isLive: true,
                        withCredentials: false,
                        hasAudio: false,
                        hasVideo: true,
                        type: 'flv'
                    },
                    config: {
                        enableStashBuffer: true,
                        enableWorker: false,
                        lazyLoad: false,
                        seekType: 'range'
                    }
                },
            },
            function onPlayerReady() {
                videojs.log("Your player is ready!");
                console.log(this
                    .tech({ IWillNotUseThisInPlugins: true }))
                this
                    .tech({ IWillNotUseThisInPlugins: true })
                    .flvPlayer.on(flvjs.Events.STATISTICS_INFO, (metadata) =>
                        console.log(metadata)
                    );
            }
        );
        player.src({
            fluid: true,
            src: 'test.flv',
            type: 'video/x-flv'
        })
    </script>
</body>

</html>

t0pu commented 4 years ago

In that case onPlayerReady won't work, as it seems that the tech only becomes available when the source was loaded.

To make sure the source was loaded, you can listen on the loadstart-event. Accessing the tech in there should work.

player.on("loadstart", function () {
    console.log(this
        .tech({ IWillNotUseThisInPlugins: true }))
    this
        .tech({ IWillNotUseThisInPlugins: true })
        .flvPlayer.on(flvjs.Events.STATISTICS_INFO, (metadata) =>
            console.log(metadata)
        );
});

ChenJiaH commented 4 years ago

Yeah. I have solved it by listening on the ready. Thank you for your help.

mister-ben / videojs-flvjs

how can i get the flvPlayer? #19