You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.0 KiB
89 lines
2.0 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8" /> |
|
<meta name="viewport" |
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> |
|
<title>视频播放</title> |
|
<style> |
|
.player-box { |
|
position: absolute; |
|
height: 300px; |
|
left: 0; |
|
right: 0; |
|
top: 50%; |
|
margin-top: -150px; |
|
} |
|
|
|
.player-tool { |
|
position: absolute; |
|
left: 1px; |
|
right: 1px; |
|
bottom: 1px; |
|
color: #fff; |
|
height: 35px; |
|
padding: 0 10px; |
|
font-size: 14px; |
|
background: rgba(255, 255, 255, .45); |
|
display: flex; |
|
flex-flow: row-reverse wrap; |
|
height: 35px; |
|
align-items: center; |
|
} |
|
|
|
.name { |
|
position: absolute; |
|
left: 10px; |
|
line-height: 35px; |
|
height: 35px; |
|
display: inline-block; |
|
width: 70%; |
|
font-size: 14px; |
|
text-overflow: ellipsis; |
|
word-break: break-all; |
|
overflow: hidden; |
|
} |
|
|
|
.myplayer { |
|
width: 100%; |
|
height: 300px; |
|
background: #000; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="player-box"> |
|
<video id="player" class="myplayer" muted="muted" controls></video> |
|
</div> |
|
<script src="js/flv.min.js"></script> |
|
<script> |
|
const params = location.href; |
|
const playUrl = |
|
'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'; //params.substring(params.indexOf('?url=')).replace('?url=', ''); |
|
console.log('播放地址', playUrl); |
|
let flvPlayer = null; |
|
createPlayer(playUrl); |
|
function createPlayer(url) { |
|
if (flvjs.isSupported()) { |
|
if (flvPlayer) { |
|
flvPlayer.pause(); |
|
flvPlayer.unload(); |
|
flvPlayer.detachMediaElement(); |
|
flvPlayer.destroy(); |
|
flvPlayer = null; |
|
} |
|
var videoElement = document.getElementById('player'); |
|
flvPlayer = flvjs.createPlayer({ |
|
type: 'flv', |
|
url: url |
|
}); |
|
flvPlayer.attachMediaElement(videoElement); |
|
flvPlayer.load(); |
|
setTimeout(() => { |
|
flvPlayer.play(); |
|
}, 500); |
|
} |
|
} |
|
</script> |
|
</body> |
|
</html> |