uniapp使用videojs报错uni-h5.es.js:16948如何解决？

在uniapp中使用videojs时遇到报错"uni-h5.es.js:16948"，请问该如何解决？已经按照文档配置了相关参数，但仍然出现这个错误，具体是什么原因导致的？希望有经验的朋友能帮忙排查一下。

2 回复

检查videojs版本兼容性，升级到最新版。检查uni-app配置，确保H5端video组件正确引入。可能是路径或资源加载问题。


在UniApp中使用Video.js时遇到uni-h5.es.js:16948报错，通常是由于以下原因导致：

常见原因及解决方案：

  1. Video.js版本兼容性问题

    • 推荐使用较新版本的Video.js（如7.x+）
    • 安装命令：npm install video.js@latest

  2. 组件初始化时机不当

    // 正确示例 - 在onReady生命周期中初始化
onReady() {
  this.$nextTick(() => {
    this.player = videojs(this.$refs.myVideo, {
      controls: true,
      autoplay: false,
      preload: 'auto'
    })
  })
}

  3. DOM元素引用问题

    <!-- 确保video元素正确引用 -->
<video ref="myVideo" class="video-js"></video>

  4. 样式文件未正确引入

    /* 在App.vue中全局引入 */
[@import](/user/import) 'video.js/dist/video-js.css';

  5. H5平台特定配置

    // 条件编译处理H5平台
// #ifdef H5
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
// #endif

  6. 内存泄漏处理

    onUnload() {
  if (this.player) {
    this.player.dispose()
    this.player = null
  }
}

完整示例：

<template>
  <view>
    <video ref="videoPlayer" class="video-js vjs-default-skin"></video>
  </view>
</template>

<script>
// #ifdef H5
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
// #endif

export default {
  data() {
    return {
      player: null
    }
  },
  onReady() {
    this.initVideo()
  },
  onUnload() {
    if (this.player) {
      this.player.dispose()
    }
  },
  methods: {
    initVideo() {
      this.$nextTick(() => {
        this.player = videojs(this.$refs.videoPlayer, {
          controls: true,
          sources: [{
            src: 'your-video-source.mp4',
            type: 'video/mp4'
          }]
        })
      })
    }
  }
}
</script>

如果问题仍未解决，建议：

  • 检查浏览器控制台完整错误信息
  • 确认Video.js资源加载是否完整
  • 尝试在纯H5环境中测试排除UniApp框架影响
回到顶部