ZLMediakit官网:播放url规则 · ZLMediaKit/ZLMediaKit Wiki (github.com)
一. 浏览器网页播放
使用ZLMediakit推流后,需要在浏览器上进行预览,可以使用flv.js来实现
新建一个 .html文件,写入下面代码,保存后双击html文件即可看视频了
二 . 关于edge播放不了,但Google浏览器能播放的问题
1.在vide id 标签后 加上 muted就可以了,如:<video id="videoElement" muted></video>
2. 实现自动播放,在video id 标签后加上 controls autoplay 就能自动播放了
如:<video id="videoElement" controls autoplay></video>。也可以不加,届时手动点击播放即可。
<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>
<video id="videoElement" controls autoplay muted></video>
<button class="btn">播放</button>
<script>
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://服务器地址(IP)/这里写app(目录)的名称/这里写stream的名称.live.flv'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
document.querySelector('.btn').addEventListener('click', () => {
// document.querySelector('.btn').click();
flvPlayer.play();
})
}
</script>
如果http默认端口不是80的话,需要加上http端口号,例如我的端口为1888
url: 'http://192.168.1.100:1888/live/test.live.flv'
url: 'http://服务器地址(IP):1888/这里写app(目录)的名称/这里写stream的名称.live.flv'
二.将flv.js 嵌入到vue中
<script>
import flvjs from "flv.js";
export default {
props: {
rtsp: String,
id: String,
},
/**
* @returns {{player: flvjs.Player}}
*/
data() {
return {
player: null,
};
},
mounted() {
const url = new URL(window.location.href);
const hostWithoutPort = url.hostname;
if (flvjs.isSupported()) {
let video = this.$refs.player;
if (video) {
this.player = flvjs.createPlayer({
type: "flv",
isLive: true,
url: `http://192.168.1.111/live/test.live.flv`,
// url:`http://${hostWithoutPort}/live/test.live.flv`,
});
this.player.attachMediaElement(video);
try {
this.player.load();
this.timer = setTimeout(() => {
this.player && this.player.play();
}, 500);
} catch (error) {
console.log(error);
}
}
}
},
beforeDestroy() {
clearTimeout(this.timer);
this.player.destory();
},
methods: {
toggleFullScreen() {
const video = this.$refs.player;
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) { /* Firefox */
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
video.webkitRequestFullscreen();
} else if (video.msRequestFullscreen) { /* IE/Edge */
video.msRequestFullscreen();
}
}
}
};
</script>