技术栈
前端
h5 vue sockjs stomp axios
后端
SpringBoot websocket
功能
1. 服务端主动推送视频，自动播放，自动续播
2. 断开后重连机制
代码实战
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge" >
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<title>Aliplayer Online Settings</title>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.8/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.8/aliplayer-min.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/config.js"></script>
<script src="js/api.js"></script>
</head>
<body>
<div id="playerVideo">
<div class="prism-player" id="player-con"></div>
</div>
<script>
new Vue({
el: '#playerVideo',
data: {
videolist: [],
videoindex: 0,
storeId: -1,
showsetting: true,
stompClient: null,
player:null
},
created: function () {
alert('created')
},
mounted: function () {
alert('mounted')
this.loadpic();
this.show();
this.initWebSocket()
},
methods: {
initWebSocket: function () {
// this.connection()
// 需要有一个失败重连得到问题
},
connection: function (count) {
let num=count||1;
const socket = new SockJS(`${base_url}/h5/endpointstore`)
this.stompClient = Stomp.over(socket)
//建立连接，订阅主题
this.stompClient.connect({}, (frame) => {
this.stompClient.subscribe('/topic/reloadpic', (val) => {
alert("重新加载图片")
window.location.reload(true);
})
},()=>
{
if (num < 10) {
console.log("重试链接次数："+num);
setTimeout(() => {
this.connection(num + 1);
}, 10000 * num);
} else {
console.log("重试"+num+"此放弃重连了");
}
})
},
loadpic: function () {
// if (localStorage.getItem("loginname") != "" && localStorage.getItem("loginname") != null) {
// this.showsetting = false;
//this.show();
//this.showSlides();
//}else
//{
// window.location.href="login.html"
// }
this.videolist=[] //视频地址数组
},
show: function () {
this.player = new Aliplayer({
"id": "player-con",
"source": this.videolist[0],
"width": "100%",
"height": "700px",
"autoplay": true,
"isLive": false,
"rePlay": false,
"playsinline": true,
"preload": true,
"language": "zh-cn",
"controlBarVisibility": "hover",
"useH5Prism": true
}, function (player) {
//先静音然后播放
//player.mute();
// player.play();
alert("The player is created")
console.log("The player is created");
}
);
var thatplayer= this.player;
var videolistTemp=this.videolist;
var videoindexTemp=0;
this.player.on('autoplay', function(data) {
if(data.paramData) //可以自动播放
{
// alert(data.paramData)
//隐藏提示
}else //不可以自动播放
{
//alert(data.paramData)
//显示提示用户点击播放
}
});
this.player.on("ended", function()
{
thatplayer.loadByUrl(videolistTemp[++videoindexTemp]);
});
//let loginname = localStorage.getItem("loginname");
// getStoreImages(loginname).then(function (res) {
// t//his.piclist = res;
//}.bind(this)).catch(function (error) {
// console.log(error);
// });
},
endedHandle:function()
{
},
}
})
</script>
</body>
实现效果
相关技术群
