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

acodercat · 2017-09-02T17:38:01Z

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

acodercat · 2017-09-03T01:24:27Z

今天上线的时候才发现

surmon-china · 2017-09-05T02:26:30Z

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

jiangxj2014 · 2017-09-27T10:57:18Z

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

acodercat · 2017-09-27T11:19:58Z

我也是这个错

acodercat · 2017-09-27T11:20:23Z

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

didianV5 · 2017-10-22T13:23:55Z

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

jerry-yo · 2017-11-03T06:57:09Z

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

acodercat · 2017-11-03T10:12:48Z

真的吗

ffdfgdfg · 2017-11-05T13:20:31Z

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

jasonzhao588 · 2017-12-07T13:45:23Z

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

surmon-china · 2018-01-09T15:49:23Z

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

surmon-china · 2018-01-10T13:56:07Z

@ffdfgdfg 是正解。

sunxiang0918 · 2018-01-10T14:55:29Z

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

surmon-china · 2018-01-11T02:31:18Z

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

sunxiang0918 · 2018-01-11T03:45:35Z

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

coffin-laughter · 2018-01-11T09:28:34Z

我想问问是怎么解决的，我按照作者的 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

surmon-china · 2018-01-11T09:33:42Z

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

coffin-laughter · 2018-01-11T09:37:32Z

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

surmon-china · 2018-01-15T12:05:37Z

@JiangKunbo

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

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

surmon-china · 2018-01-15T12:15:12Z

@JiangKunbo

okfantasy007 · 2018-06-29T10:54:52Z

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

yanghubin · 2018-07-24T05:10:13Z

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

provish · 2018-08-04T07:35:35Z

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

lebow01 · 2018-09-07T05:22:20Z

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

acodercat · 2018-09-08T05:44:23Z

同求

xuchangqi0810 · 2018-11-13T07:59:40Z

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

aspect93 · 2018-12-29T11:05:38Z

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

请问你解决了吗？？

Trap-only · 2019-02-15T07:04:25Z

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

打包上传至服务器发现

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

lx812833 · 2019-04-16T07:30:03Z

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

virtueDe · 2019-05-07T07:58:44Z

@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

ffdfgdfg · 2019-05-07T08:09:53Z

最近看了下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> .

virtueDe · 2019-05-07T08:24:42Z

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

virtueDe · 2019-05-07T09:16:38Z

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

aspect93 · 2019-05-07T09:20:30Z

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

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

virtueDe · 2019-05-07T09:22:50Z

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

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

请问版本是什么版本

aspect93 · 2019-05-07T09:25:30Z

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

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

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

virtueDe · 2019-05-07T09:35:14Z

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

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

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

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

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

ffdfgdfg · 2019-05-07T09:44:50Z

那试试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> .

aspect93 · 2019-05-07T09:48:39Z

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

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

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

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

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

virtueDe · 2019-05-08T04:57:55Z

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

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

virtueDe · 2019-05-08T05:03:44Z

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

aspect93 · 2019-05-08T06:36:27Z

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

你qq多少

virtueDe · 2019-05-08T06:44:53Z

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

ffdfgdfg · 2019-05-09T13:12:18Z

@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的话可以这么干。

wuhao0815 · 2019-07-04T07:38:24Z

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

virtueDe · 2019-07-04T08:01:55Z

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

wuhao0815 · 2019-07-04T08:11:09Z

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

DiaoFromHappyValley · 2019-07-20T10:57:14Z

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

打包上传至服务器发现

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

你好你解决了吗

DiaoFromHappyValley · 2019-07-20T11:00:05Z

最近看了下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.请问现在有什么办法解决吗？

MuBeiSAMA · 2019-07-25T03:19:03Z

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

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

linux2014linux · 2019-09-16T12:28:43Z

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 },
    ....

qxk123 · 2021-11-30T02:37:43Z

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

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

Tsingkai · 2022-09-19T05:55:16Z

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

你这个播放的是本地的视频吗？可以播放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)
    }
  })
}

heelaine · 2022-10-26T02:48:00Z

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

你这个播放的是本地的视频吗？可以播放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会报错

Ezra-Chan · 2023-06-09T09:44:09Z

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

simmzl mentioned this issue Dec 19, 2017

官方的rtmp示例无法正常播放 #125

Closed

surmon-china added the resolved label Jan 9, 2018

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

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

Comments

acodercat commented Sep 2, 2017

acodercat commented Sep 3, 2017

surmon-china commented Sep 5, 2017

jiangxj2014 commented Sep 27, 2017 • edited

acodercat commented Sep 27, 2017

acodercat commented Sep 27, 2017

didianV5 commented Oct 22, 2017

jerry-yo commented Nov 3, 2017

acodercat commented Nov 3, 2017

ffdfgdfg commented Nov 5, 2017

jasonzhao588 commented Dec 7, 2017

surmon-china commented Jan 9, 2018

surmon-china commented Jan 10, 2018

sunxiang0918 commented Jan 10, 2018

surmon-china commented Jan 11, 2018

sunxiang0918 commented Jan 11, 2018

coffin-laughter commented Jan 11, 2018 • edited

surmon-china commented Jan 11, 2018

coffin-laughter commented Jan 11, 2018

surmon-china commented Jan 15, 2018

surmon-china commented Jan 15, 2018

okfantasy007 commented Jun 29, 2018 • edited

yanghubin commented Jul 24, 2018

provish commented Aug 4, 2018

lebow01 commented Sep 7, 2018

acodercat commented Sep 8, 2018

xuchangqi0810 commented Nov 13, 2018

aspect93 commented Dec 29, 2018

Trap-only commented Feb 15, 2019

lx812833 commented Apr 16, 2019

virtueDe commented May 7, 2019

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

在webpack也已经配置:

js库各版本：

项目代码

ffdfgdfg commented May 7, 2019 via email

virtueDe commented May 7, 2019

virtueDe commented May 7, 2019

aspect93 commented May 7, 2019

virtueDe commented May 7, 2019

aspect93 commented May 7, 2019

virtueDe commented May 7, 2019

ffdfgdfg commented May 7, 2019 via email

aspect93 commented May 7, 2019

virtueDe commented May 8, 2019 • edited

virtueDe commented May 8, 2019

aspect93 commented May 8, 2019

virtueDe commented May 8, 2019 • edited

ffdfgdfg commented May 9, 2019

wuhao0815 commented Jul 4, 2019

virtueDe commented Jul 4, 2019

wuhao0815 commented Jul 4, 2019

DiaoFromHappyValley commented Jul 20, 2019

DiaoFromHappyValley commented Jul 20, 2019

MuBeiSAMA commented Jul 25, 2019

linux2014linux commented Sep 16, 2019 • edited

qxk123 commented Nov 30, 2021

Tsingkai commented Sep 19, 2022

heelaine commented Oct 26, 2022

Ezra-Chan commented Jun 9, 2023

jiangxj2014 commented Sep 27, 2017 •

edited

coffin-laughter commented Jan 11, 2018 •

edited

okfantasy007 commented Jun 29, 2018 •

edited

virtueDe commented May 8, 2019 •

edited

virtueDe commented May 8, 2019 •

edited

linux2014linux commented Sep 16, 2019 •

edited