wgi-video-player

安装

npm install wgi-video-player -D

使用方法：

在需要使用的 vue 文件中
import WgiVideoPlayer from "wgi-video-player";
import "wgi-video-player/lib/wgi-video-player.css";
注册组件
components: {
WgiVideoPlayer
},
template 使用
<WgiVideoPlayer src="http://live.cgtn.com/1000/prog_index.m3u8" type="hls" width="560px" height="350px" />

props 说明：

1.简单使用传递 type 和 src 即可，本插件已经初步集成 type: "flv" | "hls" | "rtmp" | "mp4" 2.如果初步集成的四种流类型不符合您的需求，可以传递 "playerOptions"，数据结构同 vue-video-player 接收的参数，来构造您的需求

type:

{
// 视频流类型 flv/hls/rtmp/mp4
// eslint-disable-next-line vue/require-prop-type-constructor
type: "flv" | "hls" | "rtmp" | "mp4"
},

src:

    {
    // 视频流地址
    type: String
    },

width:

    {
    type: String,
    default: "100%"
    },

height:

    {
      type: String,
      default: "100%"
    },

playsinline:

    {
      type: Boolean,
      default: true
    },

playbackRates:

    {
      //播放速度
      type: Array,
      default: () => [0.5, 1.0, 1.5, 2.0]
    },

language:

    {
      // 语言
      type: String,
      default: "zh-CN"
    },

autoplay:

    {
      // 是否等浏览器准备好后自动播放
      type: Boolean,
      default: false
    },

preload:

    {
      // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
      type: String,
      default: "auto"
    },

fluid:

    {
      // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
      type: Boolean,
      default: false
    },

controls:

    {
      // 是否打开控制按钮
      type: Boolean,
      default: true
    },

controlBar:

    {
      //控制按钮
      type: Object,
      default: () => ({
        timeDivider: true,
        durationDisplay: true,
        remainingTimeDisplay: false,
        fullscreenToggle: true //全屏按钮
      })
    },

poster:

    {
      // 封面地址
      type: String,
      default: ""
    },

notSupportedMessage:

    {
      type: String,
      default: "不支持的视频格式"
    },

playerOptions:

    {
      // 可以自己传一个option
      type: Object
    }