更新记录

1.8.0（2025-10-29） 下载此版本

• 1、增加jsmpeg.js解码器
• 2、renderjs渲染模式下增加组件插槽
• 3、height属性增加inherit配置

1.7.8（2025-10-27） 下载此版本

• 修复调用unload后不触发destroyed的问题
• 增加hlsConfig配置

1.7.7（2025-10-22） 下载此版本

• 修复H5在history路由模式下无法加载组件的问题
• 优化头部控制栏左边插槽初始位置

平台兼容性

uni-app

使用须知

• 1、这个播放器支持APP-VUE、H5、APP-NVUE,兼容VUE3，不支持小程序。
• 2、对于需要兼容小程序的项目来说，不建议你使用本插件，因为该插件有大量静态文件，会导致小程序包增大，并且静态文件是无法按需引入的。
• 3、该插件主要利用h5的video标签播放视频，video原生只支持ogg、mp4、webm格式的视频。
• 4、插件内置hls.js解码器支持播放m3u8，内置flv.js（不支持IOS）支持播放http-flv，内置jsmepg.js支持播放ws://、wss//、MPEG-TS静态文件
• 5、插件不支持播放h.265编码的视频，也不支持播放rtsp://，rtmp://协议，如果你需要播放这些视频流，需要配合后端转码播放
• 6、支持弹幕功能、字幕功能、画质切换，360全景等。
• 7、APP-NVUE可能会有性能问题，如果播放太长的视频，播放一定时间可能会出现闪退的情况，猜想应该是nvue的webview未做视频播放优化的缘故。
• 8、关于该插件在IOS得表现需要单独说明，详情见下方，IOS特别说明。
• 9、有什么不懂可以加 1_0_8_7_7_3_5_9_4_2 去掉横杠即可。

props属性

event事件

内置方法

关于H5在history路由模式下使用该组件，组件不渲染并且报错的问题（报错了才看，没报错不用看）

• 主要原因是history路由模式下加载静态资源文件路径会被带上当前页面的pathname，所以在首页（因为首页pathname一般不会带上页面路由，自行加上和跳转的除外）引入组件不会报错，在其它页面引入组件就会报错，虽然组件内部已经做了处理，但为了防止定义的页面名称过于奇怪导致处理失败，所以预留webSrc属性允许开发者自行传入video.html的路径具体用法如下：

  <!-- 引入播放器 -->
  <!-- localhost:8080/h5是你自己的项目站点，如果放在生产环境，也需要自行替换生产环境的站点 -->
  <yb-video web-src="localhost:8080/h5/uni_modules/yingbing-video/static/video.html" src="video.mp4" three="360"/>

快速开始

    <!-- 引入播放器 -->
    <yb-video src="video.mp4" height="auto" />

360视频

• 3D配置

• VUE2使用

  <!-- 引入播放器 -->
  <yb-video src="360全景视频.mp4" three="360"
  :custom="custom"
  @threechange="handleThreeChange"
  @panocontrolschange="handlePanoControlsChange"/>

  export default {
  data() {
      return {
          custom: {
              pano: {
                  controlsType: 'orbit',//控制器类型 orbit-手指或鼠标拖动 orientation-陀螺仪控制
              },
              header: {
                  enableThree: true//开启头部切换3D模式按钮
              },
              controls: {
                  disablePanoControlsType: false//关闭控制器类型切换按钮
              }
          }
      }
  },
  methods: {
      //监听3D模式改变事件
      handleThreeChange (e) {
          console.log(e.value)//3D模式
          //可以在这里记录更改后的配置，以便用户下次继续使用
      },
      //监听动画控制器改变事件
      handlePanoControlsChange (e) {
          console.log(e.value)//动画控制器类型
          //可以在这里记录更改后的配置，以便用户下次继续使用
      }
  }
  }

• VUE3使用

  <!-- 引入播放器 -->
  <yb-video src="360全景视频.mp4" three="360"
  :custom="custom"
  @threechange="handleThreeChange"
  @panocontrolschange="handlePanoControlsChange"/>

  const custom = ref({
  pano: {
      controlsType: 'orbit',//控制器类型 orbit-手指或鼠标拖动 orientation-陀螺仪控制
  },
  header: {
      enableThree: true//开启头部切换3D模式按钮
  },
  controls: {
      disablePanoControlsType: false//关闭控制器类型切换按钮
  }
  })
  //监听3D模式改变事件
  const handleThreeChange = (e) => {
  console.log(e.value)//3D模式
  //可以在这里记录更改后的配置，以便用户下次继续使用
  }
  //监听动画控制器改变事件
  const handlePanoControlsChange = (e) => {
  console.log(e.value)//动画控制器类型
  //可以在这里记录更改后的配置，以便用户下次继续使用
  }

画质模块（quality）

• 画质列表属性

• 画质配置

• VUE2使用

  <!-- 引入播放器 -->
  <yb-video src="video-480.mp4" :quality="quality" :custom="custom" @qualitychange="handleQualityChange" />

  export default {
  data() {
      return {
          quality: [{
              title: '480P',
              src: 'video-480.mp4',
              type: 'video'
          },{
              title: '720P',
              src: 'video-720.mp4',
              type: 'video'
          }],
          custom: {
              quality: {
                  name: '播放源'//自定义名称
              }
          }
      }
  },
  methods: {
      //监听画质改变事件
      handleQualityChange (e) {
          console.log(e.index)//画质索引
          console.log(e.detail)//画质详情
          //可以在这里记录更改后的配置，以便用户下次继续使用
      }
  }
  }

• VUE3使用

  <!-- 引入播放器 -->
  <yb-video :quality="quality" src="video-480.mp4" :custom="custom" @qualitychange="handleQualityChange" />

  const quality = ref([{
  title: '480P',
  src: 'video-480.mp4',
  type: 'video'
  },{
  title: '720P',
  src: 'video-720.mp4',
  type: 'video'
  }])
  const custom = ref({
  quality: {
      name: '播放源'//自定义名称
  }
  })
  //监听画质改变事件
  const handleQualityChange = (e) => {
  console.log(e.index)//画质索引
  console.log(e.detail)//画质详情
  //可以在这里记录更改后的配置，以便用户下次继续使用
  }

字幕模块（subtitles）

• 字幕列表属性

• 字幕配置

• VUE2使用

  <!-- 引入播放器 -->
  <yb-video
  src="video.mp4"
  :subtitles="subtitles"
  :subtitleIndex="subtitleIndex"
  :custom="custom"
  @subtitlechange="handleSubtitleChange" />

  export default {
  data() {
      return {
          subtitleIndex: 0,//默认加载第一个字幕
          subtitles: [{
              title: '中文字幕',
              src: 'subtitle-ch.srt'
          },{
              title: '英文字幕',
              src: 'subtitle-en.vtt'
          },{
              title: '中英字幕',
              src: 'subtitle-ch-en.ass'
          }],
          custom: {
              subtitle: {//字幕配置
                  bottom: '5%',
                  fontSize: 15
              }
          }
      }
  },
  methods: {
      //监听字幕改变事件
      handleSubtitleChange (e) {
          console.log(e.index)//字幕索引
          console.log(e.detail)//字幕详情
          //可以在这里记录更改后的配置，以便用户下次继续使用
      }
  }
  }

• VUE3使用

  <!-- 引入播放器 -->
  <yb-video
  src="video.mp4"
  :subtitles="subtitles"
  :subtitleIndex="subtitleIndex"
  :custom="custom"
  @subtitlechange="handleSubtitleChange" />

  const subtitleIndex = ref(0)//默认加载第一个字幕
  const subtitles = ref([{
  title: '中文字幕',
  src: 'subtitle-ch.srt'
  },{
  title: '英文字幕',
  src: 'subtitle-en.vtt'
  },{
  title: '中英字幕',
  src: 'subtitle-ch-en.ass'
  }])
  const custom = ref({
  subtitle: {//字幕配置
      bottom: 30,
      fontSize: 15
  }
  })
  //监听字幕改变事件
  const handleSubtitleChange = (e) => {
  console.log(e.index)//字幕索引
  console.log(e.detail)//字幕详情
  //可以在这里记录更改后的配置，以便用户下次继续使用
  }

分P列表（works）

• 分P列表属性

• 分P配置

• VUE2使用

  <!-- 引入播放器 -->
  <yb-video
  :src="src"
  :works="works"
  :workIndex="workIndex"
  :custom="custom"
  @workchange="handleWorkChange" />

  export default {
  data() {
      return {
          src: 'video1.mp4',//默认第一集
          workIndex: 0,//默认第一集
          works: [{
              title: '第一集',
              src: 'video1.mp4'
          },{
              title: '第二集',
              src: 'video2.mp4'
          },{
              title: '第三集',
              src: 'video3.mp4'
          }],
          custom: {
              work: {
                  name: '选集'//自定义名称
              }
          }
      }
  },
  methods: {
      //监听视频切换事件
      handleWorkChange (e) {
          console.log(e.index)//分P索引
          console.log(e.detail)//分P详情
          //可以在这里执行切换视频操作 比如
          this.src = e.detail.src
      }
  }
  }

• VUE3使用

  <!-- 引入播放器 -->
  <yb-video
  :src="src"
  :works="works"
  :workIndex="workIndex"
  :custom="custom"
  @workchange="handleWorkChange" />

  const src = ref('video1.mp4')
  const workIndex = ref(0)//默认第一集
  const works = ref([{
  title: '第一集',
  src: 'video1.mp4'
  },{
  title: '第二集',
  src: 'video2.mp4'
  },{
  title: '第三集',
  src: 'video3.mp4'
  }])
  const custom = ref({
  work: {
      name: '选集'//自定义名称
  }
  })
  //监听字幕改变事件
  const handleWorkChange = (e) => {
  console.log(e.index)//分P索引
  console.log(e.detail)//分P详情
  //可以在这里执行切换视频操作 比如
  src.value = e.detail.src
  }

弹幕模块（danmu）

• 弹幕列表属性

• 弹幕配置

• 弹幕过滤列表

• VUE2使用

  <!-- 引入播放器 -->
  <yb-video ref="video" :danmu="danmu" :custom="custom" src="video.mp4"
  @loadedmetadata="handleLoadedmetadata"
  @danmusend="handleDanmuSend"
  @danmuconfigchange="handleDanmuConfigChange" />
  <input v-model="text" type="text" placeholder="输入弹幕" />
  <button @tap="sendDanmu">发送弹幕</button>

  export default {
  data() {
      return {
          danmu: [{
              mode: 1,
              time: 1,
              text: '这是滚动弹幕',
              fontSize: 24,
              color: '#ffffff',
          },{
              mode: 5,
              text: '这是顶端弹幕',
              fontSize: 24,
              color: '#0ff0ff',
          },{
              mode: 4,
              text: '这是底端弹幕',
              fontSize: 24,
              color: '#0ff0ff',
          }],
          custom: {
              //自定义弹幕配置
              danmu: {
                  fontSize: 24,//弹幕默认大小
                  fontScale: 0.7,//弹幕规格（多少倍大小）
                  //弹幕过滤列表
                  filter: [{
                      pattern: '求不卡',//将包含 求不卡 的弹幕过滤掉
                      type: 'string'//普通文本过滤
                  },{
                      pattern: '\\d+',//将包含数字的弹幕过滤掉（由于是js中写入字符串所以要用双斜杠，不然会被转义）
                      type: 'regex'//正则过滤
                  }]
              }
          },
          text: ''
      }
  },
  methods: {
      //监听视频加载成功
      handleLoadedmetadata (e) {
          //判断是初始化视频，因为内部画质切换，或者错误重加载也会触发load
          if ( e.type == 'init' )  {
              this.$refs.video.loadDanmu()//加载弹幕模块
          }
      },
      //监听弹幕发送事件
      handleDanmuSend (danmu) {
          //在这里处理弹幕，比如上传发送的弹幕到数据库
      },
      //监听弹幕配置改变事件
      handleDanmuConfigChange (config) {
          console.log(config)//config为更改后的配置
          //可以在这里记录更改后的配置，以便用户下次继续使用
      },
      sendDanmu = () => {
          if ( !this.text ) return
          this.$refs.video.sendDanmu({
              mode: 1,
              text: this.text,
              color: '#ffffff'
          }, true)//true表示使用边框
      }
  }
  }

• VUE3使用

  <!-- 引入播放器 -->
  <yb-video ref="videoRef" :danmu="danmu" :custom="custom" src="video.mp4"
  @loadedmetadata="handleLoadedmetadata"
  @danmusend="handleDanmuSend"
  @danmuconfigchange="handleDanmuConfigChange" />
  <input v-model="text" type="text" placeholder="输入弹幕" />
  <button @tap="sendDanmu">发送弹幕</button>

  const danmu = ref([{
  mode: 1,
  time: 1,
  text: '这是滚动弹幕',
  fontSize: 24,
  color: '#ffffff',
  },{
  mode: 5,
  text: '这是顶端弹幕',
  fontSize: 24,
  color: '#0ff0ff',
  },{
  mode: 4,
  text: '这是底端弹幕',
  fontSize: 24,
  color: '#0ff0ff',
  }])
  const custom = ref({
  danmu: {
      fontSize: 24,//弹幕默认大小
      fontScale: 0.7,//弹幕规格（多少倍大小）
      //弹幕过滤列表
      filter: [{
          pattern: '求不卡',//将包含 求不卡 的弹幕过滤掉
          type: 'string'//普通文本过滤
      },{
          pattern: '\\d+',//将包含数字的弹幕过滤掉（由于是js中写入字符串所以要用双斜杠，不然会被转义）
          type: 'regex'//正则过滤
      }]
  }
  })
  const text = ref('')
  const videoRef = ref(null)
  //监听视频加载成功
  const handleLoadedmetadata = (e) => {
  //判断是初始化视频，因为内部画质切换，或者错误重加载也会触发load
  if ( e.type == 'init' )  {
      videoRef.value.loadDanmu()//加载弹幕模块
  }
  }
  //发送弹幕
  const sendDanmu = () => {
  if ( !text.value ) return
  videoRef.value.sendDanmu({
      mode: 1,
      text: text.value,
      color: '#ffffff'
  })
  }
  //监听弹幕发送事件
  const handleDanmuSend = (danmu) => {
  //在这里处理弹幕，比如上传发送的弹幕到数据库
  }
  //监听弹幕配置改变事件
  const handleDanmuConfigChange = (config) => {
  console.log(config)//config为更改后的配置
  //可以在这里记录更改后的配置，以便用户下次继续使用
  }

  hls.js （部分浏览器比如safri浏览器不支持hls.js，因为这些浏览器支持直接播放hls）

• 配置（hlsConfig）

• 由于webview和app通信的限制，函数是无法序列化传输的，所以如果要配置函数，需要使用字符串，如下所示：

    <!-- 引入播放器 -->
    <yb-video ref="video" src="video.mp4" :hlsConfig="hlsConfig" />

export default {
    data () {
        return {
            hlsConfig: {
                //本身应该传入函数，但因为通信限制，只能传入字符串，传入webview后，才会转换为函数
                xhrSetup: `function (xhr, url) {
                    // 设置自定义请求头
                    xhr.setRequestHeader('Authorization', 'Bearer your-token-here');
                    xhr.setRequestHeader('Custom-Header', 'CustomValue');

                    // 如果需要，你也可以根据 URL 判断并设置不同的头部
                    if (url.includes('.ts')) {
                      xhr.setRequestHeader('X-Segment-Header', 'SegmentValue');
                    }
                }`,
                //本身应该传入class类，但因为通信限制，只能传入字符串，传入webview后，才会转换为class
                pLoader: `
                    class CustomPlaylistLoader {
                      constructor(config) {
                        // 初始化，如果需要可以使用配置
                      }

                      load(context, responseType, onSuccess, onError, onTimeout, timeout, retry, retryDelay) {
                        // 在加载前修改URL：添加上动态参数
                        const url = new URL(context.url);
                        url.searchParams.set('token', 'dynamic-token-value');
                        url.searchParams.set('t', Date.now()); // 例如加时间戳防止缓存
                        const modifiedUrl = url.toString();

                        // 使用修改后的URL进行Fetch
                        fetch(modifiedUrl, {
                          method: 'GET',
                          headers: new Headers({
                            'Authorization': 'Bearer your-token', // 同时可以设置自定义头
                            'Custom-Header': 'CustomValue'
                          })
                        }).then(response => {
                          if (!response.ok) {
                            throw new Error('Network response was not ok');
                          }
                          return response[responseType](); // 根据responseType处理响应体
                        }).then(data => {
                          onSuccess(response, data, modifiedUrl, context); // 成功回调
                        }).catch(error => {
                          onError(error); // 失败回调
                        });
                      }

                      abort() {
                        // 实现中止请求的逻辑，例如使用AbortController
                      }

                      destroy() {
                        // 执行清理工作
                      }
                    }
                `
            }
        }
    }
}

flv.js （不支持ios）

• 切片列表（segments）

• 配置（flvConfig）

jsmpeg.js

• 配置（jsmpegConfig）

消息提示（showToast）

• VUE2使用

  <!-- 引入播放器 -->
  <yb-video ref="video" src="video.mp4" @loadedmetadata="handleLoadedmetadata" />

  export default {
  methods: {
      handleLoadedmetadata (e) {
          this.$refs.video.showToast({
              message: '视频加载成功',//消息内容
              duration: 3000//显示周期
          })
      }
  }
  }

• VUE3使用

  <!-- 引入播放器 -->
  <yb-video ref="videoRef" src="video.mp4" @loadedmetadata="handleLoadedmetadata" />

  const videoRef = ref(null)
  //监听截图保存事件
  const handleLoadedmetadata = (e) => {
  videoRef.value.showToast({
      message: '视频加载成功',//消息内容
      duration: 3000//显示周期
  })
  }

自定义工具栏（showToolbar）

• VUE2使用

  <!-- 引入播放器 -->
  <yb-video ref="video" src="video.mp4" :custom="custom" />

  export default {
  data () {
      return {
          custom: {
              controls: {
                  rightSlots: [{
                      innerHTML: '<div class="my-custom-btn yb-player-icon">自定义</div>',
                      click: () => {
                          this.$refs.video.showToolbar({
                              selector: '.my-custom-btn',
                              list: [{
                                  text: '自定义工具1',
                                  click: () => {
                                      this.$refs.video.showToast('自定义工具1')
                                  }
                              },{
                                  text: '自定义工具2',
                                  click: () => {
                                      this.$refs.video.showToast('自定义工具2')
                                  }
                              },{
                                  text: '自定义工具3',
                                  click: () => {
                                      this.$refs.video.showToast('自定义工具3')
                                  }
                              }]
                          })
                      }
                  }]
              }
          }
      }
  }
  }

• VUE3使用

  <!-- 引入播放器 -->
  <yb-video ref="videoRef" src="video.mp4" :custom="custom" />

  const videoRef = ref(null)
  const custom = ref({
  controls: {
      rightSlots: [{
          innerHTML: '<div class="my-custom-btn yb-player-icon">自定义</div>',
          click: () => {
              videoRef.value.showToolbar({
                  selector: '.my-custom-btn',
                  list: [{
                      text: '自定义工具1',
                      click: () => {
                          videoRef.value.showToast('自定义工具1')
                      }
                  },{
                      text: '自定义工具2',
                      click: () => {
                          videoRef.value.showToast('自定义工具2')
                      }
                  },{
                      text: '自定义工具3',
                      click: () => {
                          videoRef.value.showToast('自定义工具3')
                      }
                  }]
              })
          }
      }]
  }
  })

自定义配置（custom）（因为内容太多只展示VUE2示例，VUE3示例参考上面的示例更改）

    <!-- 引入播放器 -->
    <yb-video src="video.mp4" :custom="custom" />

export default {
    data () {
        return {
            custom: {
                disableLoading: false,//关闭loading
                disableCenterPlay: false,//关闭中间播放按钮
                disableError: false,//关闭加载错误提示
                disableBottomProgress: false,//关闭底部进度条
                //自定义插槽
                slots: [{
                    innerHTML: '<div class="yb-player-icon" style="position:absolute;top:50px;left:50px;">跟随控制栏的按钮</div>',
                    followControls: true,//跟随控制栏
                    click: function () {
                        console.log('点击了跟随控制栏的按钮')
                    }
                },{
                    innerHTML: '<div class="yb-player-icon" style="position:absolute;top:50px;right:50px;">永远显示的按钮</div>',
                    followControls: false,//不跟随控制栏
                    click: function () {
                        console.log('点击了永远显示的按钮')
                    }
                }],
                //头部控制器配置
                header: {
                    disableBack: false,//关闭返回按钮
                    disableTitle: false,//关闭标题显示
                    disableWorks: false,//关闭分P按钮
                    disableRate: false,//关闭倍速选择
                    enableThree: false,//开启3D模式切换按钮
                    disableMore: false,//关闭展示更多按钮
                    disableLock: false,//关闭锁屏
                    disableThreeCapture: false,//关闭3D截图
                    disableCapture: false,//关闭视频截图
                    disableDanmuFilter: false,//关闭弹幕过滤配置
                    disableDanmuSetting: false,//关闭弹幕配置
                    //更多选项自定义配置
                    more: [{
                        text: '测试按钮1',
                        click: function () {
                            console.log('点击了测试按钮1')
                        }
                    },{
                        text: '测试按钮2',
                        click: function () {
                            console.log('点击了测试按钮2')
                        }
                    }],
                    //左边插槽
                    leftSlots: [{
                        innerHTML: '<div class="yb-player-icon">左边按钮</div>',
                        click: function () {
                            console.log('点击了头部左边按钮')
                        }
                    }],
                    //右边插槽
                    rightSlots: [{
                        innerHTML: '<div class="yb-player-icon">右边按钮</div>',
                        click: function () {
                            console.log('点击了头部右边按钮')
                        }
                    }]
                },
                //底部控制栏自定义配置
                controls: {
                    disablePrev: false,//关闭播放上一个按钮
                    disableNext: false,//关闭播放下一个按钮
                    disableToggle: false,//关闭播放\暂停按钮
                    disableDanmuSend: false,//关闭发送弹幕按钮
                    disableFullscreen: false,//关闭全屏按钮
                    disableMuted: false,//关闭静音按钮
                    disableDanmuVisible: false,//关闭弹幕显示和隐藏按钮
                    disableSubtitle: false,//关闭字幕切换按钮
                    disableQuality: false,//关闭画质切换按钮
                    disablePanoControlsType: false,//关闭3D模式控制器切换按钮
                    //左边插槽
                    leftSlots: [{
                        innerHTML: `
                            <svg viewBox="0 0 24 24">
                                <path d="M8 5v14l11-7z"/>
                            </svg>
                        `,//如果要插入图标，只能使用svg
                        click: function () {
                            console.log('点击了控制栏左边插槽按钮')
                        }
                    }],
                    //右边插槽
                    rightSlots: [{
                        innerHTML: `
                            <svg viewBox="0 0 24 24">
                                <path d="M8 5v14l11-7z"/>
                            </svg>
                        `,//如果要插入图标，只能使用svg
                        click: function () {
                            console.log('点击了控制栏右边插槽按钮')
                        }
                    }]
                },
                //进度条自定义配置
                progress: {
                    disablePrev: false,//关闭播放上一个按钮
                    disableNext: false,//关闭播放下一个按钮
                    disableToggle: false,//关闭播放\暂停按钮
                    disableFullscreen: false,//关闭全屏按钮
                    disableRange: false,//关闭进度条拖动
                    //左边插槽
                    leftSlots: [{
                        innerHTML: '<div class="yb-player-icon">左边按钮</div>',
                        click: function () {
                            console.log('点击了进度条左边按钮')
                        }
                    }],
                    //右边插槽
                    rightSlots: [{
                        innerHTML: '<div class="yb-player-icon">右边按钮</div>',
                        click: function () {
                            console.log('点击了进度条右边按钮')
                        }
                    }]
                },
                //手势配置
                gesture: {
                    initialVolume: 0,//初始化设备音量
                    initialLight: 0,//初始化屏幕亮度
                    disableUnFullscreenEvent: false,//关闭非全屏手势事件
                    disableLongPress: false,//关闭长按事件
                    disableLight: false,//关闭手势控制屏幕亮度
                    disableVolume: false,//关闭手势控制设备音量
                    disableProgress: false,//关闭手势跳转进度
                    disableSingleClick: false,//关闭单击事件
                    disableDoubleClick: false,//关闭双击事件
                    disableDoubleClick: false,//关闭双击事件
                    setLight: function (light) {//自定义改变亮度方法
                        console.log('亮度', light)
                    },
                    setVolume: function (volume) {//自定义改变音量方法
                        console.log('音量', volume)
                    },
                    getLight: function () {//自定义获取亮度方法
                        return 1//返回亮度 0-1
                    },
                    getVolume: function () {//自定义获取音量方法
                        return 1//返回音量 0-1
                    }
                },
                //分P配置
                work: {
                    name: '分P'//自定义名称
                },
                //画质配置
                quality: {
                    name: '画质'//自定义名称
                },
                //字幕配置
                subtitle: {
                    color: '#ffffff',//文字颜色
                    fontSize: 18,//字体大小
                    bottom: '10%',//底部边距
                    shadowColor: 'rgba(0,0,0,.5)'//阴影颜色
                },
                //3D模式配置
                pano: {
                    controlsType: 'orientation',//控制器类型 orbit-手指或鼠标拖动 orientation-陀螺仪控制
                    disableDragReverse: false,//关闭反方向拖拽旋转（反向拖拽更符合人的直觉）
                    enableDamping: true//添加阻尼效果（滑动更顺畅）
                },
                //弹幕配置
                danmu: {
                    accuracy: 1,//绘制精度 auto-自动使用屏幕DPI 任意整数-自定义精度 高精度会导致性能问题，谨慎使用
                    speed: 1,//弹幕运行速度
                    playbackRate: 1,//弹幕倍速
                    color: '#FFFFFF',//弹幕默认颜色
                    fontSize: 18,//弹幕默认大小
                    fontScale: 1,//弹幕规格（多少倍大小）
                    fontFamily: 'Microsoft Yahei',//弹幕默认字体
                    opacity: 1,//弹幕透明度
                    top: 0,//舞台顶部间距
                    bottom: 0,//舞台底部间距
                    lineGap: 5,//弹幕行间距
                    overlap: false,//开启防重叠
                    timeDiffrence: 0,//时间差（用于校准弹幕和视频进度的时间差，一般不需要）
                    disableScroll: false,//关闭滚动弹幕
                    disableTop: false,//关闭顶端弹幕
                    disableBottom: false,//关闭底端弹幕
                    disableFilter: false,//关闭弹幕过滤
                    filter: []//过滤列表
                }
            }
        }
    }
}

全屏元素和非全屏元素标记

    <!-- 引入播放器 -->
    <yb-video src="video.mp4" :custom="custom" />

• vue2使用

  export default {
  data () {
      return {
          custom: {
              //头部控制器配置
              header: {
                  //右边插槽
                  rightSlots: [{
                      innerHTML: '<div class="yb-player-icon yb-plyer-full">头部按钮1</div>',//yb-plyer-full表示该插槽元素只在全屏时显示
                      click: function () {
                          console.log('点击了只在全屏时显示的头部按钮')
                      }
                  },{
                      innerHTML: '<div class="yb-player-icon yb-plyer-unfull">头部按钮2</div>',//yb-plyer-unfull表示该插槽元素只在非全屏时显示
                      click: function () {
                          console.log('点击了只在非全屏时显示的头部按钮')
                      }
                  }]
              }
          }
      }
  }
  }

• VUE3使用

  <!-- 引入播放器 -->
  <yb-video ref="videoRef" src="video.mp4" :custom="custom" />

  const custom = ref({
  //头部控制器配置
  header: {
      //插槽
      rightSlots: [{
          innerHTML: '<div class="yb-player-icon yb-plyer-full">头部按钮1</div>',//yb-plyer-full表示该插槽元素只在全屏时显示
          click: function () {
              console.log('点击了只在全屏时显示的头部按钮')
          }
      },{
          innerHTML: '<div class="yb-player-icon yb-plyer-unfull">头部按钮2</div>',//yb-plyer-unfull表示该插槽元素只在非全屏时显示
          click: function () {
              console.log('点击了只在非全屏时显示的头部按钮')
          }
      }]
  }
  })

组件插槽（仅在renderjs渲染模式下有效）

• VUE2使用

  <!-- 引入播放器 -->
  <yb-video ref="video" render-type="renderjs" src="video.mp4" >
      <view class="custom-slot" @tap="handleSlotClick">这是组件插槽仅在renderjs渲染模式下有效</view>
      <!-- yb-player-gesture是手势事件标记，如果不添加yb-player-gesture类，点击到该组件会阻止手势事件（比如点击弹出控制栏），自行根据需求添加 -->
      <view class="custom-slot yb-player-gesture" @tap="handleSlotClick">这是组件插槽仅在renderjs渲染模式下有效</view>
  </yb-video>

  export default {
  method: {
      handleSlotClick () {
          this.$refs.video.showToast('点击了组件插槽')
      }
  }
  }

  .custom-slot{
  position:absolute;
  top:50px;
  left:50px;
  color:#fff;
  }

• VUE3使用

  <!-- 引入播放器 -->
  <yb-video ref="videoRef" render-type="renderjs" src="video.mp4" >
      <view class="custom-slot" @tap="handleSlotClick">这是组件插槽仅在renderjs渲染模式下有效</view>
      <!-- yb-player-gesture是手势事件标记，如果不添加yb-player-gesture类，点击到该组件会阻止手势事件（比如点击弹出控制栏），自行根据需求添加 -->
      <view class="custom-slot yb-player-gesture" @tap="handleSlotClick">这是组件插槽仅在renderjs渲染模式下有效</view>
  </yb-video>

  const videoRef = ref(null)
  const handleSlotClick = () => {
  videoRef.value.showToast('点击了组件插槽')
  }

  .custom-slot{
  position:absolute;
  top:50px;
  left:50px;
  color:#fff;
  }

IOS特别说明

• IOS可能不支持在APP-NVUE环境使用本插件，因为WKWbview内核对于访问本地的html文件，也认为是跨域行为
• IOS即将废弃UIWebview内核，所以ios项目默认使用WKWebview，而WKWebview严格执行cors策略，很多行为都会被认为是跨域行为，导致很多操作无法执行，特别是使用iframe加载本地网页，所以ios只能使用renderjs方式渲染视频（或许H5可以）
• IOS想使用web方式渲染或者在APP-NVUE中使用，需要去manifest.json里面配置webview内核为UIWebview，如下：

  // 在manifest.json配置
  "app-plus": {
      "kernel": {
          "ios": "UIWebview"    //或者 "WKWebview"
      },
      // ...
  }

• 如果你修改了webview内核在APP-NVUE-IOS环境使用本插件，会有全屏问题，因为IOS不支持全屏API，只能使用css模拟，但APP-NVUE不支持z-index控制层级，默认后渲染得元素层级更高，所以APP-NVUE-IOS全屏时可能会出现无法遮盖后渲染元素得问题

• 正如上面所说IOS不支持全屏API，所以IOS在APP-VUE和H5得全屏也和安卓有区别，在IOS上使用css模拟全屏无法遮盖原生元素，需要自行遮盖和隐藏，如下：

  // 在pages.json配置引入播放器的页面为沉浸模式
  {
      "path": "pages/index/index",
      "style": {
          "navigationStyle": "custom"//隐藏原生导航栏
      }
  },

  <!-- 在pages/index/index页面引入播放器 -->
  <yb-video src="video.mp4" @fullscreenchange="handleFullscreenChange" />

  export default {
  methods: {
      handleFullscreenChange (e) {
          //css模拟的全屏
          if ( e.type == 'css' ) {
              //当前状态是开启全屏
              if ( e.fullscreen ) {
                  //可以在这里做无法遮盖原生元素的隐藏
                  //插件内部已经调用plus.screen.setFullscreen(true)和plus.hideSystemNavigation() 一般不用调用
              }
              //当前状态是退出全屏
              else {
                  //可以在这里做无法遮盖原生元素的显示
                  //插件内部已经调用plus.screen.setFullscreen(false)和plus.showSystemNavigation() 一般不用调用
              }
          }
  
      }
  }
  }

• 真机调试IOS发现横竖屏设置无效，需要去manifest.json配置屏幕方向（配置完成后需重新打包自定义基座或者apk才会生效）

  // 在manifest.json配置screenOrientation的屏幕方向
   "app-plus" : {
      "screenOrientation": [
          "portrait-primary",
          "portrait-secondary",
          "landscape-primary",
          "landscape-secondary"
      ]//ios不配置屏幕方向，无法旋转屏幕
  }