search

surmon-china / videojs-player

@videojs player component for @vuejs(3) and React.
https://github.surmon.me/videojs-player
MIT License
5.27k stars 1.13k forks source link

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

Open acodercat opened 7 years ago

acodercat commented 7 years ago

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

acodercat commented 7 years ago

今天上线的时候才发现

surmon-china commented 7 years ago

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

jiangxj2014 commented 7 years ago

default

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

acodercat commented 7 years ago

我也是这个错

acodercat commented 7 years ago

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

didianV5 commented 7 years ago

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

jerry-yo commented 7 years ago

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

acodercat commented 7 years ago

真的吗

ffdfgdfg commented 7 years ago

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

jasonzhao588 commented 6 years ago

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

video-player
surmon-china commented 6 years ago

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

surmon-china commented 6 years ago

@ffdfgdfg 是正解。

sunxiang0918 commented 6 years ago

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

surmon-china commented 6 years ago

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

sunxiang0918 commented 6 years ago

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

coffin-laughter commented 6 years ago

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

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

coffin-laughter commented 6 years ago

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

surmon-china commented 6 years ago

@JiangKunbo

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

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

surmon-china commented 6 years ago

@JiangKunbo

image

okfantasy007 commented 6 years ago

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

yanghubin commented 6 years ago

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

provish commented 6 years ago

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

ghost commented 6 years ago

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

acodercat commented 6 years ago

同求

xuchangqi0810 commented 5 years ago

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

aspect93 commented 5 years ago

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

请问你解决了吗？？

Trap-only commented 5 years ago

@surmon-china @ffdfgdfg @chuanshuo-yongyuan 我在webpack处已经添加这一行， image 打包上传至服务器发现 image

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

lx812833 commented 5 years ago

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

virtueDe commented 5 years ago

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

在webpack也已经配置:

image

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 commented 5 years ago

最近看了下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 https://github.com/surmon-china/vue-video-player/issues/90#issuecomment-489976367, or mute the thread https://github.com/notifications/unsubscribe-auth/AEJHFX2KHCWNZAOLD45FUOLPUEZDRANCNFSM4DZL3I4A .

virtueDe commented 5 years ago

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

virtueDe commented 5 years ago

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

aspect93 commented 5 years ago

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

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

virtueDe commented 5 years ago

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

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

请问版本是什么版本

aspect93 commented 5 years ago

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

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

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

virtueDe commented 5 years ago

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

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

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

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

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

ffdfgdfg commented 5 years ago

那试试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 https://github.com/surmon-china/vue-video-player/issues/90#issuecomment-490008750, or mute the thread https://github.com/notifications/unsubscribe-auth/AEJHFX5BCX3Q26EFAV6X2N3PUFENNANCNFSM4DZL3I4A .

aspect93 commented 5 years ago

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

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

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

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

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

virtueDe commented 5 years ago

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

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

virtueDe commented 5 years ago

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

aspect93 commented 5 years ago

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

你qq多少

virtueDe commented 5 years ago

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

ffdfgdfg commented 5 years ago

@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 commented 5 years ago

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

virtueDe commented 5 years ago

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

wuhao0815 commented 5 years ago

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

DiaoFromHappyValley commented 5 years ago

@surmon-china @ffdfgdfg @chuanshuo-yongyuan 我在webpack处已经添加这一行， image 打包上传至服务器发现 image

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

你好 你解决了吗

DiaoFromHappyValley commented 5 years ago

最近看了下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 commented 5 years ago

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

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