zhny_web.git - Gitblit

parent: c7d469ef | patch | commit | ignore whitespace

zhongrj

2022-08-02 e76c6b42f6bfde08f425aaa3090c58203fecdbc6

溯源码详情播放，全屏按钮无法出来修复

2 files modified

	public/traceablityInfo.html	77 ●●●●● patch \| view \| raw \| blame \| history
	public/traceablityInfos.html	79 ●●●●● patch \| view \| raw \| blame \| history

 public/traceablityInfo.html

@@ -597,12 +597,12 @@
      align-items: center;
    }

    #video-body {
    /* #video-body {
      display: inline-block;
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    } */

    #video-footer {
      width: 100%;
@@ -804,13 +804,7 @@
          //读取第一个视频 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">`
          //遍历监控点
@@ -1042,20 +1036,8 @@
        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;

@@ -1073,58 +1055,9 @@
        }

        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 () {

 public/traceablityInfos.html

@@ -1,4 +1,4 @@
<!-- web 端详情 -->
<!-- web 详情页 -->
<!DOCTYPE html>
<html lang="en">

@@ -597,12 +597,12 @@
      align-items: center;
    }

    #video-body {
    /* #video-body {
      display: inline-block;
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    } */

    #video-footer {
      width: 100%;
@@ -804,13 +804,7 @@
          //读取第一个视频 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">`
          //遍历监控点
@@ -1042,20 +1036,8 @@
        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;

@@ -1073,58 +1055,9 @@
        }

        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 () {

			@@ -597,12 +597,12 @@
			align-items: center;
			}

			#video-body {
			/* #video-body {
			display: inline-block;
			height: 100%;
			position: relative;
			overflow: hidden;
			}
			} */

			#video-footer {
			width: 100%;
			@@ -804,13 +804,7 @@
			//读取第一个视频 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">`
			//遍历监控点
			@@ -1042,20 +1036,8 @@
			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;

			@@ -1073,58 +1055,9 @@
			}

			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 () {

			@@ -1,4 +1,4 @@
			<!-- web 端详情 -->
			<!-- web 详情页 -->
			<!DOCTYPE html>
			<html lang="en">

			@@ -597,12 +597,12 @@
			align-items: center;
			}

			#video-body {
			/* #video-body {
			display: inline-block;
			height: 100%;
			position: relative;
			overflow: hidden;
			}
			} */

			#video-footer {
			width: 100%;
			@@ -804,13 +804,7 @@
			//读取第一个视频 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">`
			//遍历监控点
			@@ -1042,20 +1036,8 @@
			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;

			@@ -1073,58 +1055,9 @@
			}

			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 () {