使用hls的时候在本地是正常的，编译放在服务器上就不显示了

Question

使用hls的时候在本地是正常的，编译放在服务器上就不显示了

acodercat opened this issue 7 years ago · 55 comments

acodercat commented 7 years ago

使用hls的时候在本地是正常的，编译放在服务器上就不显示了，求！！！！

acodercat commented 7 years ago

真的吗

acodercat commented 6 years ago

同求

👍1

Answer 1 · 2017-09-03T01:24:27.000Z

今天上线的时候才发现

Answer 2 · 2017-09-05T02:26:30.000Z

同学，你要给出具体的错误，和你自己的判断，否则没有办法解决。

Answer 3 · 2017-09-27T10:57:18.000Z

同样编译之后在服务器上运行报错：

Answer 4 · 2017-09-27T11:19:58.000Z

我也是这个错

Answer 5 · 2017-09-27T11:20:23.000Z

但是在edge浏览器上可以播放

Answer 6 · 2017-10-22T13:23:55.000Z

遇到相同的问题，有没有解决方法？

Answer 7 · 2017-11-03T06:57:09.000Z

因为你们config和build 中用的是严格模式'use strict'，去掉再打包
就好了

Answer 8 · 2017-11-05T13:20:31.000Z

我也遇到这个问题了，照着这个
https://github.com/surmon-china/vue-video-player/issues/34
在webpack配置文件module里加入 noParse: [/videojs-contrib-hls/],

Answer 9 · 2017-12-07T13:45:23.000Z

为什么我用这个组件播放hls流媒体视频的时候总是报错，我就是按照你的示例来做的

Answer 10 · 2018-01-09T15:49:23.000Z

最新版，v5.0.0 应该是可以解决这个问题的，ps: 需要删除 node_modules 重新安装。

Answer 11 · 2018-01-10T13:56:07.000Z

@ffdfgdfg 是正解。

Answer 12 · 2018-01-10T14:55:29.000Z

导入了v5.0.0 把node_modules 删除了后.还是在报错: "Cannot read property 'EventTarget' of undefined"

Answer 13 · 2018-01-11T02:31:18.000Z

@sunxiang0918 videojs-contrib-hls依赖 window.videojs全局变量，想办法使其能访问，像这里：
https://github.com/surmon-china/vue-video-player/blob/master/examples/04-video.vue#L32

Answer 14 · 2018-01-11T03:45:35.000Z

@surmon-china 搞定了,谢谢了!!

Answer 15 · 2018-01-11T09:28:34.000Z

我想问问是怎么解决的，我按照作者的 demo 代码如下：
`
import 'video.js/dist/video-js.css'

import 'vue-video-player/src/custom-theme.css'

import { videoPlayer } from 'vue-video-player'

import videojs from 'video.js'

window.videojs = videojs

// hls plugin for videojs6

require('videojs-contrib-hls/dist/videojs-contrib-hls.js')

`

但是打包编译以后还是报错：
Uncaught ReferenceError: e is not defined

Answer 16 · 2018-01-11T09:33:42.000Z

@chuanshuo-yongyuan 上面说了啊, @ffdfgdfg 的答案是正解。

Answer 17 · 2018-01-11T09:37:32.000Z

@surmon-china 非常感谢，解决了，谢谢！！！

Answer 18 · 2018-01-15T12:05:37.000Z

@JiangKunbo

在webpack配置文件module里加入 noParse: [/videojs-contrib-hls/]

这样一个简单的操作，很难实施吗

Answer 19 · 2018-01-15T12:15:12.000Z

@JiangKunbo

Answer 20 · 2018-06-29T10:54:52.000Z

开发模式下，已换成v5.0.0，还是报错：Uncaught ReferenceError: e is not defined

Answer 21 · 2018-07-24T05:10:13.000Z

m3u8格式的视频,本地可以正常播放,打包发布之后就'No compatible source was found for this media.'变成这个,希望大佬解答一下,困扰几天了,感激不尽@surmon-china

Answer 22 · 2018-08-04T07:35:35.000Z

How to use noParse in nuxt.config.js ...?

Answer 23 · 2018-09-07T05:22:20.000Z

videojs 7.0版本已经不需要videojs-contrib-hls 麻烦作者更新

Answer 24 · 2018-11-13T07:59:40.000Z

请问一下支持rmvb格式的视频吗？

Answer 25 · 2018-12-29T11:05:38.000Z

m3u8格式的视频,本地可以正常播放,打包发布之后就'No compatible source was found for this media.'变成这个,希望大佬解答一下,困扰几天了,感激不尽@surmon-china

请问你解决了吗？？

Answer 26 · 2019-02-15T07:04:25.000Z

@surmon-china @ffdfgdfg @chuanshuo-yongyuan 我在webpack处已经添加这一行，

打包上传至服务器发现

这个要怎么处理呢？麻烦大家给个解决方案谢谢

Answer 27 · 2019-04-16T07:30:03.000Z

请问vue-video-player动态绑定sources下的src导致不能播放视频，怎么解决？

Answer 28 · 2019-05-07T07:58:44.000Z

@surmon-china 您好，我也遇到上诉的问题，本地运行正常，部署到线上控制台报错： e is not defined。

在webpack也已经配置:

js库各版本：

    "vue-video-player": "^5.0.2",
    "vue": "^2.5.11",
    "video.js": "^7.5.4",
    "videojs-contrib-hls": "^5.15.0",

项目代码

import 'vue-video-player/src/custom-theme.css'
import videojs from 'video.js'
window.videojs = videojs
require('videojs-contrib-hls/dist/videojs-contrib-hls.js')

          <video-player class="vjs-custom-skin"
                        :options="playerOptions(item, idx)"
                        @ready="playerReadied">
          </video-player>

    playerOptions(item, idx){
      return {
        autoplay: false,
        muted: true,
        preload: 'auto',
        language: "en",
        aspectRatio: '16:9',
        sources: [{
          withCredentials: false,
          type: "application/x-mpegURL",
          src: item.url
        }],
        controlBar: {
          timeDivider: false,
          durationDisplay: false
        },
        flash: { hls: { withCredentials: false }},
        html5: { hls: { withCredentials: false }},
        poster: "https://gydev-1252687978.piccd.myqcloud.com/gy/pc-upload/20190506/768d8f3a-20cb-4e3f-bb8b-7b2ba459cc2c.png"
      }
    },

项目紧急，期待您的解答！！ @surmon-china

Answer 29 · 2019-05-07T08:09:53.000Z

最近看了下videojs，videojs7已经不用videojs-contrib-hls 改用内建videojs-http-streaming，解决这个问题我想有两个思路，一个是降级videojs成5，这个以前确实是能够解决的；还有就是不解析 videojs-http-streaming。具体的我也没有测试过，给不出详细办法，近来上班了比较忙，见谅。 De <notifications@github.com> 于2019年5月7日周二下午3:58写道：

…

@surmon-china <https://github.com/surmon-china> 您好，我也遇到上诉的问题，本地运行正常，部署到线上控制台报错： e is not defined。在webpack也已经配置: [image: image] <https://user-images.githubusercontent.com/46802209/57282651-14797480-70e0-11e9-97bc-9c20e3c4c38f.png> js库各版本： "vue-video-player": "^5.0.2", "vue": "^2.5.11", "video.js": "^7.5.4", "videojs-contrib-hls": "^5.15.0", 项目代码 import 'vue-video-player/src/custom-theme.css' import videojs from 'video.js' window.videojs = videojs require('videojs-contrib-hls/dist/videojs-contrib-hls.js') <video-player class="vjs-custom-skin" :options="playerOptions(item, idx)" @ready="playerReadied"> </video-player> playerOptions(item, idx){ return { autoplay: false, muted: true, preload: 'auto', language: "en", aspectRatio: '16:9', sources: [{ withCredentials: false, type: "application/x-mpegURL", src: item.url }], controlBar: { timeDivider: false, durationDisplay: false }, flash: { hls: { withCredentials: false }}, html5: { hls: { withCredentials: false }}, poster: "https://gydev-1252687978.piccd.myqcloud.com/gy/pc-upload/20190506/768d8f3a-20cb-4e3f-bb8b-7b2ba459cc2c.png" } }, 项目紧急，期待您的解答！！ @surmon-china <https://github.com/surmon-china> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#90 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEJHFX2KHCWNZAOLD45FUOLPUEZDRANCNFSM4DZL3I4A> .

Answer 30 · 2019-05-07T08:24:42.000Z

@ffdfgdfg 感谢您的回复！我先给videojs降级来尝试解决！

Answer 31 · 2019-05-07T09:16:38.000Z

@ffdfgdfg
降级版本为 "video.js": "^5.18.4", ，问题没解决，请问是这个版本吗

Answer 32 · 2019-05-07T09:20:30.000Z

@ffdfgdfg
降级版本为 "video.js": "^5.18.4", ，问题没解决，请问是这个版本吗

可以试试升级，我上次就是这样解决的，我把他的组件源码直接copy到自己项目里

Answer 33 · 2019-05-07T09:22:50.000Z

@ffdfgdfg
降级版本为 "video.js": "^5.18.4", ，问题没解决，请问是这个版本吗

可以试试升级，我上次就是这样解决的，我把他的组件源码直接copy到自己项目里

请问版本是什么版本

Answer 34 · 2019-05-07T09:25:30.000Z

@ffdfgdfg
降级版本为 "video.js": "^5.18.4", ，问题没解决，请问是这个版本吗

可以试试升级，我上次就是这样解决的，我把他的组件源码直接copy到自己项目里

请问版本是什么版本
不记得了。。你试试最新版本把

Answer 35 · 2019-05-07T09:35:14.000Z

@ffdfgdfg
降级版本为 "video.js": "^5.18.4", ，问题没解决，请问是这个版本吗

可以试试升级，我上次就是这样解决的，我把他的组件源码直接copy到自己项目里

请问版本是什么版本
不记得了。。你试试最新版本把

@ffdfgdfg 说 videojs7已经不用videojs-contrib-hls，而是内建videojs-http-streaming；
我一开始videojs的版本就是最新的版本；

您的意思是把源码下载到本地项目里，然后在使用的时候引入吗？

Answer 36 · 2019-05-07T09:44:50.000Z

那试试6吧，6也可以用contrib-hls De <notifications@github.com> 于 2019年5月7日周二 17:35写道：

…

@ffdfgdfg <https://github.com/ffdfgdfg> 降级版本为 "video.js": "^5.18.4", ，问题没解决，请问是这个版本吗可以试试升级，我上次就是这样解决的，我把他的组件源码直接copy到自己项目里请问版本是什么版本不记得了。。你试试最新版本把 @ffdfgdfg <https://github.com/ffdfgdfg> 说 videojs7已经不用videojs-contrib-hls，而是内建videojs-http-streaming；我一开始videojs的版本就是最新的版本；您的意思是把源码下载到本地项目里，然后在使用的时候引入吗？ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#90 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEJHFX5BCX3Q26EFAV6X2N3PUFENNANCNFSM4DZL3I4A> .

Answer 37 · 2019-05-07T09:48:39.000Z

@ffdfgdfg
降级版本为 "video.js": "^5.18.4", ，问题没解决，请问是这个版本吗

可以试试升级，我上次就是这样解决的，我把他的组件源码直接copy到自己项目里

请问版本是什么版本
不记得了。。你试试最新版本把

@ffdfgdfg 说 videojs7已经不用videojs-contrib-hls，而是内建videojs-http-streaming；
我一开始videojs的版本就是最新的版本；

您的意思是把源码下载到本地项目里，然后在使用的时候引入吗？
对头，在自己项目里自己依赖videojs和hls

Answer 38 · 2019-05-08T04:57:55.000Z

@ffdfgdfg 谢谢您昨天的回答，我今天上午试了6.0.1 与 6.2.1，还是不可以，请问可以加你的联系方式具体去来交流吗？后面我直接使用的video.js (版本为^7.5.4)，部署到服务器上还是会报e is not defined，我在videojs提了lssues，videojs/video.js#5985

作者回复我说错误太过于笼统，请问我应该怎么具体去描述我的问题

Answer 39 · 2019-05-08T05:03:44.000Z

@aspect93 按照您说的，我上午直接使用videojs，部署到测试坏境还是会报错； videojs他现在的7版本已经不用videojs-contrib-hls，我是不是只要下载 video.js与video-js.min.css就行了？可以告诉我您的联系方式吗？我这项目有点急

Answer 40 · 2019-05-08T06:36:27.000Z

@aspect93 按照您说的，我上午直接使用videojs，部署到测试坏境还是会报错； videojs他现在的7版本已经不用videojs-contrib-hls，我是不是只要下载 video.js与video-js.min.css就行了？可以告诉我您的联系方式吗？我这项目有点急

你qq多少

Answer 41 · 2019-05-08T06:44:53.000Z

@ffdfgdfg 您好！问题刚刚已经解决。我是按照@aspect93的方法把源码下载，依赖于本地，线上显示不报错了！非常感谢您之前提供的思路！！

Answer 42 · 2019-05-09T13:12:18.000Z

@virtueDe @aspect93 昨天今天晚上抽空测测，首先上次我说错了，这个项目基于videojs6.6+的，所以我当时说videojs5引起误导。
我直接用npm安装这个项目，项目内自动装videojs6.13，这就是videojs6的最新版了，之前的办法可以用。
再说说用videojs7，我用npm下的最新videojs7.5.4替换掉项目的node_modules内的老videojs6.13，改了下package.json，去掉ie8，hls等等多余依赖，直接就能用，不管是调试还是编译，videojs7里面确实内建了videojs-http-streaming，所以想用videojs7的话可以这么干。

Answer 43 · 2019-07-04T07:38:24.000Z

@virtueDe 你好，请问你是怎么解决的？

Answer 44 · 2019-07-04T08:01:55.000Z

@wuhao0815 把videojs源码下载依赖到本地就用videojs

Answer 45 · 2019-07-04T08:11:09.000Z

@virtueDe 是整个项目还是只要video.js

Answer 46 · 2019-07-20T10:57:14.000Z

@surmon-china @ffdfgdfg @chuanshuo-yongyuan 我在webpack处已经添加这一行，

打包上传至服务器发现

这个要怎么处理呢？麻烦大家给个解决方案谢谢

你好你解决了吗

Answer 47 · 2019-07-20T11:00:05.000Z

最近看了下videojs，videojs7已经不用videojs-contrib-hls 改用内建videojs-http-streaming，解决这个问题我想有两个思路，一个是降级videojs成5，这个以前确实是能够解决的；还有就是不解析 videojs-http-streaming。具体的我也没有测试过，给不出详细办法，近来上班了比较忙，见谅。 De notifications@github.com 于2019年5月7日周二下午3:58写道：
…
@surmon-china https://github.com/surmon-china 您好，我也遇到上诉的问题，本地运行正常，部署到线上控制台报错： e is not defined。在webpack也已经配置: [image: image] https://user-images.githubusercontent.com/46802209/57282651-14797480-70e0-11e9-97bc-9c20e3c4c38f.png js库各版本： "vue-video-player": "^5.0.2", "vue": "^2.5.11", "video.js": "^7.5.4", "videojs-contrib-hls": "^5.15.0", 项目代码 import 'vue-video-player/src/custom-theme.css' import videojs from 'video.js' window.videojs = videojs require('videojs-contrib-hls/dist/videojs-contrib-hls.js') <video-player class="vjs-custom-skin" :options="playerOptions(item, idx)" @ready="playerReadied"> playerOptions(item, idx){ return { autoplay: false, muted: true, preload: 'auto', language: "en", aspectRatio: '16:9', sources: [{ withCredentials: false, type: "application/x-mpegURL", src: item.url }], controlBar: { timeDivider: false, durationDisplay: false }, flash: { hls: { withCredentials: false }}, html5: { hls: { withCredentials: false }}, poster: "https://gydev-1252687978.piccd.myqcloud.com/gy/pc-upload/20190506/768d8f3a-20cb-4e3f-bb8b-7b2ba459cc2c.png" } }, 项目紧急，期待您的解答！！ @surmon-china https://github.com/surmon-china — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#90 (comment)>, or mute the thread https://github.com/notifications/unsubscribe-auth/AEJHFX2KHCWNZAOLD45FUOLPUEZDRANCNFSM4DZL3I4A .

你好我也报错了那个 required is not defined.请问现在有什么办法解决吗？

Answer 48 · 2019-07-25T03:19:03.000Z

How to use noParse in nuxt.config.js ...?

set config.module.noParse = /videojs-contrib-hls/ in the extend function in the nuxt.config.js

Answer 49 · 2019-09-16T12:28:43.000Z

m3u8格式的视频,本地可以正常播放,打包发布之后就'No compatible source was found for this media.'变成这个,希望大佬解答一下,困扰几天了,感激不尽@surmon-china

请问你解决了吗？？

我也遇到了同样的问题，我是忘记了如下语句:

    import 'video.js/dist/video-js.css';
    import 'vue-video-player/src/custom-theme.css';
    import 'videojs-contrib-hls';   // <----- 我就是忘记了这一行语句
    import { videoPlayer } from 'vue-video-player';
    export default {
      name: "VideoPlayerWithCover",
      components: { videoPlayer },
    ....

Answer 50 · 2021-11-30T02:37:43.000Z

@ffdfgdfg 您好！问题刚刚已经解决。我是按照@aspect93的方法把源码下载，依赖于本地，线上显示不报错了！非常感谢您之前提供的思路！！

具体是什么样的，能详细说一下吗？因为我现在也是这个问题

Answer 51 · 2022-09-19T05:55:16.000Z

同样编译之后在服务器上运行报错：

你这个播放的是本地的视频吗？可以播放blob:http://localhost:9528/9018e430-d6f4-4c8a-95a7-2ea0f255a906 这样的链接吗？
我通过这种方法生成了本地视频的URL

export function readMediaFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsArrayBuffer(file.raw)
    reader.onloadend = (e) => {
      const buffer = e.target.result
      const videoBlob = new Blob([new Uint8Array(buffer)], { type: 'video/mp4' })
      const url = window.URL.createObjectURL(videoBlob)// 此处url内容形如 blob:http://localhost:9528/9018e430-d6f4-4c8a-95a7-2ea0f255a906
      const realUrl = url.slice(5)
      resolve(realUrl)
    }
    reader.onerror = (e) => {
      reject(e)
    }
  })
}

Answer 52 · 2022-10-26T02:48:00.000Z

同样编译之后在服务器上运行报错：

你这个播放的是本地的视频吗？可以播放blob:http://localhost:9528/9018e430-d6f4-4c8a-95a7-2ea0f255a906 这样的链接吗？我通过这种方法生成了本地视频的URL

export function readMediaFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsArrayBuffer(file.raw)
    reader.onloadend = (e) => {
      const buffer = e.target.result
      const videoBlob = new Blob([new Uint8Array(buffer)], { type: 'video/mp4' })
      const url = window.URL.createObjectURL(videoBlob)// 此处url内容形如 blob:http://localhost:9528/9018e430-d6f4-4c8a-95a7-2ea0f255a906
      const realUrl = url.slice(5)
      resolve(realUrl)
    }
    reader.onerror = (e) => {
      reject(e)
    }
  })
}

浏览器版本过低就会报图片的错误，目前已知chrome65会报错

Answer 53 · 2023-06-09T09:44:09.000Z

我没用这个插件，直接用的videojs，遇到这个问题，搜索到这里了。
我用的是8.X的版本，解决方案是
import videojs from '!video.js'
参考videojs/video.js#8170 (comment)