请大家指点12
使用vue + videojs 播放服务器静态m3u8视频，但是m3u8文件无法获取。
直接在网址栏输入m3u8的ip, 可直接下载，如图
使用VLC播放器播放m3u8网络串流，播放结果正常，如下图：
前端使用vue + videojs ，无法获取播放视频
控制台报错如下：
在解决过程中，
nginx配置如下：
location /video {
alias D:/videoDisplay/m3u8;
autoindex on;
autoindex_localtime on;
expires -1;
add_header Cache-Control no-cache; #跨域支持
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
}
rtmp 配置如下：
rtmp {
server {
listen 1935;
chunk_size 4096;
application live {
live on;
record all;
record_path E:/rtmp;
record_unique on;
}
application hls {
live on;
hls on;
hls_path D:/nginx_1.7.11.3_Gryphon/temp/hls;
hls_fragment 10s;
}
}
}
防火墙入站策略中: 8080, 1935, 8083 端口已开通，但依旧无法播放。
前端核心代码：
获取视频：
//获取播放视频
//获取播放视频
getVideo(id, url, image) {
this.$message.info("加载中，请稍等");
this.videoDes = this.selectVideoDesc;
//获取字典中的项目简介
let pageRequest = { pageNum: 1, pageSize: 10, columnFilters: { label: { name: 'label', value: this.project } } }
this.$api.dict.findPage(pageRequest).then((res) => {
this.projectDes = res.data.content[0]["description"]
})
// 获取封面图片
if (this.selectImage) {
let p = Object.assign({}, { id: id, image: image })
this.$api.videoPlay.getImage(p).then(
res => {
if (res) {
var response2 = res;
const content2 = response2;
const blob2 = new Blob([content2], { type: 'application/octet-stream;charset=utf-8' });
let src2 = window.URL.createObjectURL(blob2);
// this.poster = src2;
// let src2 = require('E://Program Files//apache-tomcat-8.5.69//webapps//data//elfinder2//videoDisplay//imageUrl//IMAGE_20230829_e2756f8a9694400ea8ce6249249443d0.jpg');
this.player.poster(src2);
this.player.posterImage.show();
}
}
)
}
//获取视频
setTimeout(() => {
// var this_ = this;
//this;
let params = Object.assign({}, { 'id': id, 'url': url, 'image': image })
this.$api.videoPlay.getVideo(params).then(res => {
if (res.code == 200) {
// var response = res;
// const content = response;
// const blob = new Blob([content], { type: 'application/octet-stream;charset=utf-8' });
// let srcc = window.URL.createObjectURL(blob);
// this.player.src({
// src: srcc,
// type: 'video/mp4'
// });
// this.player.load(srcc);
// this.player.play(srcc);
// setTimeout(() => {
// this.getPlayRecord(id);
// }, 200);
let str = res.data["m3u8Name"];
//测试环境
let srcc = "http://localhost:8080/video/" + this.selectID + "/" + str;
//量产环境
// let srcc = "http://10.1.1.96:8083/video/" + this.selectID + "/" + str;
// alert("srcc:" + srcc);
// let srcc = "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8";
// alert(srcc);
setTimeout(() => {
this.player.src({
src: srcc,
type: 'application/x-mpegURL'
});
this.player.load(srcc);
this.player.play();
this.savePlayRecord(this.selectID, 0, 1);
this.getPlayRecord(this.selectID);
this.controlFlag = true;
setTimeout(() => {
this.controlFlag = false;
}, 5000);
}, 2000);
} else {
this.$message.error("视频转码失败，请联系管理员");
}
})
}, 200);
},
videojs 配置：
computed: {
options() {
return {
playbackRates: [0.5, 1.0, 2.0], //播放速度
autoplay: false,
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: "zh-CN",
aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
// sources: [
// {
// // 这样是支持.m3u8 网上找到的各卫视直播视频流都是此格式
// type: "application/x-mpegURL", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
// },
// ],
poster: "", //你的封面地址
notSupportedMessage: "此视频暂无法播放，请稍后重新尝试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
controls: true,
controlBar: {
timeDivider: true,//时间分割线
durationDisplay: true,//总时间
remainingTimeDisplay: true,//剩余时间
currentTimeDisplay: true,//显示当前播放时间
fullscreenToggle: true, //全屏按钮
volumePanel: {
inline: false
},
},
};
}
},
