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 = nullinitPlayer()// 初始化播放器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>