From e76c6b42f6bfde08f425aaa3090c58203fecdbc6 Mon Sep 17 00:00:00 2001
From: zhongrj <123456>
Date: Tue, 02 Aug 2022 14:56:37 +0800
Subject: [PATCH] 溯源码详情播放，全屏按钮无法出来修复
---
public/traceablityInfos.html | 79 +++------------------------------------
1 files changed, 6 insertions(+), 73 deletions(-)
diff --git a/public/traceablityInfos.html b/public/traceablityInfos.html
index 7f8a253..3766b88 100644
--- a/public/traceablityInfos.html
+++ b/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 () {
--
Gitblit v1.9.3