124 lines
3.4 KiB
HTML
124 lines
3.4 KiB
HTML
<html>
|
||
|
||
<head>
|
||
<title></title>
|
||
</head>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.video {
|
||
width: 100%;
|
||
height: 100%;
|
||
color: white;
|
||
font-size: 1.125rem;
|
||
position: relative;
|
||
|
||
}
|
||
|
||
.video .iconfont .icon-snapshot {
|
||
display: none;
|
||
width: 100%;
|
||
text-align: center;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 2;
|
||
}
|
||
|
||
video {
|
||
object-fit: fill;
|
||
}
|
||
|
||
video::-internal-media-controls-download-button {
|
||
display: none;
|
||
}
|
||
|
||
video::-webkit-media-controls-enclosure {
|
||
overflow: hidden;
|
||
}
|
||
|
||
video::-webkit-media-controls-panel {
|
||
width: calc(100% + 1.875rem);
|
||
}
|
||
|
||
video /deep/ .xl-chrome-ext-bar {
|
||
display: none;
|
||
z-index: -1;
|
||
}
|
||
.video-js .vjs-fullscreen-control{
|
||
display: none;
|
||
}
|
||
.iconfont .icon-snapshot{
|
||
display: none;
|
||
}
|
||
.iconfont{
|
||
display: none;
|
||
}
|
||
.vjs-has-started .vjs-control-bar{
|
||
display: none !important;
|
||
}
|
||
</style>
|
||
|
||
<body>
|
||
<script src="EasyPlayer-element.min.js"></script>
|
||
<script src="jquery.min.js"></script>
|
||
<div class="video" id="appc">
|
||
<easy-player id="player" live="true" stretch show-custom-button="false"></easy-player>
|
||
</div>
|
||
<script>
|
||
|
||
/*
|
||
访问页面示例：http://127.0.0.1:5500/video.html?src=http://10.16.56.21:83/openUrl/G6oxla8/live.m3u8
|
||
页面会自动解析src后内容并播放视频
|
||
*/
|
||
function getQueryString(name) {
|
||
var reg = new RegExp("(^|&)" + name + "=([^'']*)(&|$)", "i");
|
||
// var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
||
var r = window.location.search.substr(1).match(reg);
|
||
if (r != null) return unescape(r[2]); return null;
|
||
}
|
||
// var videoBack = 'ws://192.168.105.213:9999/play?stream=rtsp://10.16.56.21:554/openUrl/EKndeuY?beginTime=20220709T141558&endTime=20220710T141558'
|
||
// $('#player').attr('video-url',videoBack);
|
||
$('#player').attr('video-url',getQueryString('src'));
|
||
// $('#player').attr('video-url',"video.mp4");
|
||
// 截图
|
||
// function snapshot(){
|
||
// if(document.getElementsByClassName("easy-video-player-inner")[0]){
|
||
// var dom = document.getElementsByClassName("easy-video-player-inner")[0].firstChild.firstChild
|
||
// var canvas = window.canvas = document.createElement('canvas')
|
||
// canvas.width = dom.offsetWidth
|
||
// canvas.height = dom.offsetHeight
|
||
// canvas.getContext('2d')?.drawImage(dom,0,0,canvas.width,canvas.height);
|
||
// strDataUrl = canvas.toDataURL('image/png')
|
||
// downloadpic(strDataUrl)
|
||
// }
|
||
|
||
// }
|
||
// function downloadpic(url){
|
||
// var a = document.createElement("a"); // 生成一个a元素
|
||
// var event = new MouseEvent("click"); // 创建一个单击事件
|
||
// a.download = "监控快照_"+new Date().toJSON()+".png"; // 设置图片名称
|
||
// a.href = url; // 将生成的URL设置为a.href属性
|
||
// a.dispatchEvent(event); // 触发a的单击事件
|
||
// }
|
||
//点击事件
|
||
$('#appc').click(function(){
|
||
let val = getQueryString('src')
|
||
window.parent.postMessage({
|
||
val
|
||
}, '*'); // * 通配符 匹配所有地址; content 表示传递过去嵌套iframe页面的数据
|
||
})
|
||
</script>
|
||
</body>
|
||
|
||
</html> |