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的时候在本地是正常的,编译放在服务器上就不显示了,求!!!!

linux2014linux commented 5 years ago

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

请问你解决了吗??

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

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

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

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

Tsingkai commented 2 years ago

default

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

你这个播放的是本地的视频吗?可以播放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 commented 2 years ago

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

你这个播放的是本地的视频吗?可以播放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 commented 1 year ago

我没用这个插件,直接用的videojs,遇到这个问题,搜索到这里了。 我用的是8.X的版本,解决方案是 import videojs from '!video.js' 参考https://github.com/videojs/video.js/issues/8170#issuecomment-1480370207