video-player m3u8类型 无法播放
时间: 2023-12-30 14:23:01 浏览: 57
根据提供的引用内容,您可以尝试以下解决方案:
1. 确认是否已经导入了videojs-contrib-hls,如果没有,请先导入该库。
2. 确认m3u8文件是否存在或者链接是否正确,可以尝试在浏览器中打开链接查看是否可以正常播放。
3. 确认视频文件是否已经编码为HLS格式,如果不是,请先将视频文件转换为HLS格式。
4. 确认视频文件是否已经分段,如果没有,请先将视频文件分段。
5. 确认视频文件是否已经上传到服务器,如果没有,请先将视频文件上传到服务器。
6. 确认视频文件是否可以在其他播放器中播放,如果不能,请检查视频文件是否损坏或者格式是否正确。
以下是三个相关问题:
相关问题
vue vue-video-player无法播放无音频流的m3u8
根据提供的引用内容,可以使用vue-video-player播放m3u8格式的视频,但是无法播放无音频流的m3u8。为了解决这个问题,需要安装videojs-contrib-hls插件,并在Vue项目中进行配置。
以下是一个使用vue-video-player播放m3u8格式视频的示例:
1. 首先,安装vue-video-player和videojs-contrib-hls插件:
```shell
npm install vue-video-player --save
npm install videojs-contrib-hls --save
```
2. 在main.js中引入vue-video-player和videojs-contrib-hls:
```javascript
import Vue from 'vue'
import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'
Vue.use(VideoPlayer)
```
3. 在Vue组件中使用vue-video-player播放m3u8格式视频:
```html
<template>
<div>
<video-player :options="playerOptions"></video-player>
</div>
</template>
<script>
export default {
data() {
return {
playerOptions: {
sources: [{
type: 'application/x-mpegURL',
src: 'path/to/your/video.m3u8'
}],
autoplay: true,
controls: true
}
}
}
}
</script>
```
请注意,以上示例中的"path/to/your/video.m3u8"应替换为实际的m3u8视频文件路径。
vue-video-player播放.mov
根据引用\[1\]和引用\[2\],在使用vue-video-player播放.mov视频时,需要在sources中添加.mov格式的视频源。例如:
```javascript
sources: \[
{
type: "video/ogg",
src: "video.ogg"
},
{
type: "video/webm",
src: "video.webm"
},
{
type: "video/mp4",
src: "video.mp4"
},
{
type: "video/quicktime",
src: "video.mov"
}
\]
```
另外,根据引用\[3\],在main.js中引入vue-video-player时,需要使用import videoPlayer from 'vue-video-player',而不是import VueVideoPlayer from 'vue-video-player'。并且,还需要引入相应的样式文件,如'vue-video-player/src/custom-theme.css'和'video.js/dist/video-js.css'。最后,使用Vue.use(VideoPlayer)来注册vue-video-player插件。
希望这些信息对你有帮助!
#### 引用[.reference_title]
- *1* [Vue-视频加载(vue-video-player)支持.mp4.m3u8.flv.mov格式](https://blog.csdn.net/niexier/article/details/117461895)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [Vue-Video-Player 播放格式问题](https://blog.csdn.net/p930318/article/details/80453504)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [vue使用vue-video-player实现视频播放:](https://blog.csdn.net/weixin_53791978/article/details/127757827)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]