| | |
|---|
| | | <!-- web 端详情 --> |
|---|
| | | <!-- web 详情页 --> |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="en"> |
|---|
| | | |
|---|
| | |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #video-body { |
|---|
| | | /* #video-body { |
|---|
| | | display: inline-block; |
|---|
| | | height: 100%; |
|---|
| | | position: relative; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | } */ |
|---|
| | | |
|---|
| | | #video-footer { |
|---|
| | | width: 100%; |
|---|
| | |
|---|
| | | //读取第一个视频 url |
|---|
| | | strvedio = strvedio + `<div class="content-body"> |
|---|
| | | <div id="video-body"> |
|---|
| | | <video controls id="video-element" muted>你的浏览器太老了，不支持HTML5视频。</video> |
|---|
| | | <div id="video-footer" class="css-closeTrans"> |
|---|
| | | <img id="oper-btn" src="img/i-play.png" width="40px" /> |
|---|
| | | <div id="video-sound"> |
|---|
| | | </div> |
|---|
| | | <img id="full-btn" src="img/i-fs.png" width="35px" /> |
|---|
| | | </div> |
|---|
| | | <video controls id="video-element" autoplay muted>你的浏览器太老了，不支持HTML5视频。</video> |
|---|
| | | </div> |
|---|
| | | </div><div class="content-footer">` |
|---|
| | | //遍历监控点 |
|---|
| | |
|---|
| | | dom.empty(); |
|---|
| | | dom.append(str0 + str1 + str2 + strvedio + str10 + strdetection + str11 + str3 + str4 + str5 + str6); |
|---|
| | | |
|---|
| | | var playImg = "img/i-play.png", |
|---|
| | | pauseImg = "img/i-pause.png", |
|---|
| | | fsImg = "img/i-fs.png", |
|---|
| | | exitFsImg = "img/i-exitfs.png", |
|---|
| | | soundOpenImg = "img/sound-open.png", |
|---|
| | | soundCloseImg = "img/sound-close.png"; |
|---|
| | | |
|---|
| | | var videoBody = document.getElementById('video-body'), |
|---|
| | | videoElement = document.getElementById('video-element'), |
|---|
| | | videoBegin = document.getElementById('video-begin'), |
|---|
| | | videoEnd = document.getElementById('video-end'), |
|---|
| | | videoFooter = document.getElementById('video-footer'), |
|---|
| | | operBtn = document.getElementById('oper-btn'), |
|---|
| | | fullBtn = document.getElementById('full-btn'); |
|---|
| | | videoElement = document.getElementById('video-element'); |
|---|
| | | |
|---|
| | | var slide = false, soundWidth = 0; |
|---|
| | | |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | videoElement.style.width = "100%"; |
|---|
| | | videoElement.style.height = "385px"; |
|---|
| | | videoElement.style.objectFit = "fill"; |
|---|
| | | |
|---|
| | | //播放 或 暂停 |
|---|
| | | operBtn.onclick = function () { |
|---|
| | | if (this.attributes.src.value === playImg) { |
|---|
| | | flvPlayer.play(); |
|---|
| | | this.src = pauseImg; |
|---|
| | | } else { |
|---|
| | | flvPlayer.pause(); |
|---|
| | | this.src = playImg; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | //全屏 或 退出全屏 |
|---|
| | | fullBtn.onclick = function () { |
|---|
| | | if (this.attributes.src.value === fsImg) { |
|---|
| | | var docEle = videoContainer; |
|---|
| | | var rfs = docEle.requestFullScreen || docEle.webkitRequestFullScreen || docEle.mozRequestFullScreen || docEle.msRequestFullScreen; |
|---|
| | | if (rfs) { |
|---|
| | | rfs.call(docEle); |
|---|
| | | } |
|---|
| | | this.src = exitFsImg; |
|---|
| | | } else { |
|---|
| | | var cfs = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || document.exitFullScreen; |
|---|
| | | if (cfs) { |
|---|
| | | cfs.call(document); |
|---|
| | | } |
|---|
| | | this.src = fsImg; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | //鼠标进入 显示 工具条 |
|---|
| | | videoBody.onmouseenter = function () { |
|---|
| | | videoFooter.classList.add( |
|---|
| | | "css-show-transition", |
|---|
| | | "css-showTrans" |
|---|
| | | ); |
|---|
| | | } |
|---|
| | | //鼠标退出 隐藏 工具条 |
|---|
| | | videoBody.onmouseleave = function () { |
|---|
| | | videoFooter.classList.add( |
|---|
| | | "css-close-transition", |
|---|
| | | "css-closeTrans" |
|---|
| | | ); |
|---|
| | | videoFooter.classList.remove( |
|---|
| | | "css-show-transition", |
|---|
| | | "css-showTrans" |
|---|
| | | ); |
|---|
| | | } |
|---|
| | | |
|---|
| | | //播放视频 |
|---|
| | | operBtn.onclick(); |
|---|
| | | |
|---|
| | | //切换视频 |
|---|
| | | $('.jksp .content-footer .equi-btn').click(function () { |
|---|
