vue 播放rtmp 直播拉流视频

红太狼 2022-10-24 11:49 1265阅读 0赞

**一、写插件**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70]

<template>
      <video
        ref="videoPlayer"
        class="video-js vjs-default-skin vjs-big-play-centered"
        style="width: 100%; height: 100%"
      ></video>
    </template>
    
    <script>
    import videojs from "video.js";
    import "video.js/dist/video-js.css";
    import "videojs-flvjs-es6";
    import "videojs-flash";
    
    export default { 
      props: { 
        videoUrl: { 
          type: String,
          default: "",
        },
      },
      data() { 
        return { 
          videoPlayer: null,
        };
      },
      mounted() { 
        this.handelVideoUrl();
      },
      methods: { 
        handelVideoUrl() { 
          let options = { 
            muted: true,
            controls: true, //进度条
            autoplay: false, //自动播放
            loop: true, //是否循环
            languages: { 
              "zh-CN": require("video.js/dist/lang/zh-CN.json"),
            },
            language: "zh-CN",
            preload: "auto",
          };
          const url = this.videoUrl.replace(/\s+/g, "");
          if (url.indexOf("rtmp") > -1) { 
            //rtmp格式视频
            options = { 
              ...options,
              techOrder: ["html5", "flash"], // 兼容顺序
              sources: [{  src: this.videoUrl, type: "rtmp/flv" }],
            };
          } else if (url.lastIndexOf(".") > -1) { 
            if (url.substring(url.lastIndexOf(".") + 1) === "flv") { 
              //flv格式视频
              options = { 
                ...options,
                techOrder: ["html5", "flvjs"], // 兼容顺序
                flvjs: { 
                  mediaDataSource: { 
                    isLive: false,
                    cors: true,
                    withCredentials: false,
                  },
                },
                sources: [{  src: this.videoUrl, type: "video/x-flv" }],
              };
            } else { 
              //其他格式视频
              options = { 
                ...options,
                sources: [{  src: this.videoUrl, type: "video/mp4" }],
              };
            }
          }
    
          this.videoPlayer = videojs(this.$refs.videoPlayer, { 
            ...options,
          });
        },
      },
      destroyed() { 
        if (this.videoPlayer) { 
          this.videoPlayer.dispose();
        }
      },
    };
    </script>

**二、页面中引入插件**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 1]

import videos from '../../../components/Videos/index'
    
    export default { 
      components: { 
        videos
      },

**三、html中使用**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 2]

//pullSrc 视频地址 按需获取
    <videos :videoUrl="pullSrc"></videos>

![在这里插入图片描述][20210129141759109.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70]: /images/20221024/39ad33c013ef4650b28fd6e2e586bcca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 1]: /images/20221024/11198111a6ca4360a7a52d6a52c51dc1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 2]: /images/20221024/63b8bcac9dc54d699bed4a6d1d10bf6b.png
[20210129141759109.png]: /images/20221024/b55441c23b604d678e88471a14cd880d.png