flv.js使用

最新推荐文章于 2024-06-19 14:32:39 发布

wcy0112

最新推荐文章于 2024-06-19 14:32:39 发布

阅读量528

点赞数 9

文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/wcy0112/article/details/139158405

版权

H5中使用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <title>demo</title>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <base target="_blank" />
</head>
</head>

<body style="margin-top:50px">
  <div class="w100 flex" style="height: 80px">
    <video id="id1" preload="auto" muted autoplay type="rtmp/flv">
      <source src="">
    </video>
  </div>

  <script src="./flv.min.js"></script>
  <script>
    videoElement = document.getElementById('id1');
    let url = "xxx"; // flv视频流地址
    if (flvjs.isSupported()) {
      flvPlayer = flvjs.createPlayer({
        type: 'flv',					//媒体类型
        url: url,					//flv格式媒体URL
        isLive: true,					//数据源是否为直播流
        hasAudio: false,				//数据源是否包含有音频
        hasVideo: true,					//数据源是否包含有视频
        enableStashBuffer: false		//是否启用缓存区
      }, {
        enableWorker: false, 			//不启用分离线程
        enableStashBuffer: false, 		//关闭IO隐藏缓冲区
        autoCleanupSourceBuffer: true 	//自动清除缓存
      });
      flvPlayer.attachMediaElement(videoElement);	//将播放实例注册到节点
      flvPlayer.load(); 					//加载数据流
      flvPlayer.play();					//播放数据流
    }
  </script>
</body>

</html>

flv.js及flv.min.js文件

链接：[https://pan.baidu.com/s/1JhnpoLYQ_sL4lTxxz4B_Lw]
提取码：tx0l

vue中使用

安装flv.js

html

<video
 :id="form.videoId"
 autoplay
 playsinline
 muted
 webkit-playsinline="true"
 controls
></video>

js

import FlvPlayer from "flv.js";


    close() {
      this.player.pause();
      this.player.unload();
      this.player.detachMediaElement();
      this.player.destroy();
      this.player = null;
    },
    async initPlayer(url, index) {
      var videoElement = document.getElementById("id"); // 获取到html中的video标签
      console.log(videoElement, "videoElement");
      FlvPlayer.isSupported() && (await FlvPlayer.getFeatureList());
      this.player = FlvPlayer.createPlayer({
        type: "flv",
        url: url,
        // hasAudio: true,
      });

      // 设置视频元素
      this.player.attachMediaElement(videoElement);
      // 监听播放器就绪事件
      let that = this;
      that.loading = true;
      this.player.on(FlvPlayer.Events.MEDIA_INFO, (info) => {
        // 在此可以做一些播放器初始化后的操作
        console.log("info", info);
        that.loading = false;
      });
      // 监听错误事件
      this.player.on(FlvPlayer.Events.ERROR, (type, details) => {
        console.log(`FLV.js 报错: ${type}`, details);
        that.loading = false;
        // that.close(index);
        // 根据错误类型和详情进行相应处理
        switch (type) {
          case FlvPlayer.ErrorTypes.NETWORK_ERROR:
            // 网络错误处理
            break;
          case FlvPlayer.ErrorTypes.MEDIA_ERROR:
            // 媒体错误处理
            break;
          case FlvPlayer.ErrorTypes.IO_ERROR:
            // 输入/输出错误处理
            break;
          default:
          // 其他错误处理
        }
      });

      // 加载和播放视频
      this.player.load();
      this.player.play();
    },

wcy0112

关注

9
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
flv.js使用

链接：[https://pan.baidu.com/s/1JhnpoLYQ_sL4lTxxz4B_Lw]//flv格式媒体URL。//数据源是否包含有音频。//数据源是否包含有视频。//将播放实例注册到节点。// flv视频流地址。//数据源是否为直播流。//关闭IO隐藏缓冲区。
复制链接

扫一扫