共计 2081 个字符,预计需要花费 6 分钟才能阅读完成。
1、间接在 html 文件中应用 SkeyeWebPlayer.js 播放器
2、最终成果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SkeyeWebPlayer 播放器 </title>
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="./styles/reset.css">
<style>
.header-view {
height: 60px;
position: relative;
}
.header-bar {
height: 60px;
background-color: #032C43;
box-shadow: 0 6px 10px -3px rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.header-group {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
color: #ffffff;
}
.head-title {
font-size: 20px;
font-weight: bold;
}
.container {
max-width: 800px;
margin-left: auto;
margin-right: auto;
padding-right: 15px;
padding-left: 15px;
}
.web-media-player {margin-top: 30px;}
.play-url {
margin-top: 30px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.play-url input {
width: 100%;
height: 24px;
padding: 0 10px;
}
.btn {
margin-left: 15px;
padding: 3px 8px;
border-radius: 4px;
background-color: #666;
color: #fff;
flex-shrink: 0;
}
</style>
</head>
<body>
<div id="app">
<div class="header-view">
<div class="header-bar">
<div class="container header-group">
<div class="head-title">SkeyeWebPlayer 播放器测试 </div>
</div>
</div>
</div>
<section class="container">
<!-- 播放器容器 -->
<div class="web-media-player" id="SkeyeWebPlayer"></div>
<div class="play-url">
<input type="text" id="url" value="rtsp://192.168.0.111:5540/00000000031316423888/0">
<button class="btn" onclick="play()"> 播放 </button>
</div>
</section>
</div>
<script src="./static/vue.min.js"></script>
<script src="./static/vue-router.min.js"></script>
<script src="./static/element-ui/index.js"></script>
<script src="./static/axios.min.js"></script>
<script src="static/SkeyeWebPlayer/SkeyeWebPlayer.js"></script>
<script type="application/javascript">
let player = null
initPlayer()
// 初始化播放器
function initPlayer() {
// new WebMediaPlayer(url,domId,callback,options)player = new WebMediaPlayer(
'',
`SkeyeWebPlayer`,
callbackFunc,
{
cbUserPtr: this,
decodeType: 'auto',
openAudio: 0,
BigPlay: false,
Height: 56.25
});
}
// 播放
function play() {let url = document.getElementById('url').value
player.play(url, 1, 0)
}
// 回调
function callbackFunc(cbType, cbParams) {console.log(cbType, cbParams)
}
</script>
</body>
</html>
正文完