Skip to content

石磊 / cihai

Go to a project
Commit 4164eeed by 石磊
Options

pc端调整完成

1 parent 67970052
Inline Side-by-side
Showing 12 changed files with 1210 additions and 95 deletions
serverside/cihai-pc/src/main/webapp/WEB-INF/jsp/home/index.jsp
<%@ include file="/WEB-INF/jsp/include/taglib.jsp" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--添加此行消除额外空格--%>
<%@ page trimDirectiveWhitespaces="true" %>
<%--添加此行消除额外空格--%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
......@@ -12,7 +15,7 @@
<body>
<div class="bg-video">
<video src="/static/temp/xingkong.mp4" autoplay loop preload="true" x-webkit-airplay="true"
webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" controls="false"></video>
webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" ></video>
<div class="bg-mask bg-mask-1"></div>
</div>
......
serverside/cihai-pc/src/main/webapp/WEB-INF/jsp/include/header_search.jsp
......@@ -11,12 +11,14 @@
<meta name="renderer" content="webkit">
<title>辞海-${param.pageTitle}</title>
<link rel="stylesheet" href="/static/css/vendor.css">
<link rel="stylesheet" href="/static/css/video.css">
<%--<link rel="stylesheet" href="/static/css/index.css">--%>
<script src="/static/js/plugins/jquery.min.js"></script>
<script src="/static/js/plugins/validator/jquery.validator.js"></script>
<script src="/static/js/vendor.js" merge="true"></script>
<script src="/static/js/backend.js"></script>
<script src="/static/js/layer/layer.js"></script>
<script src="/static/js/pingzi_video.js"></script>
<script>
$(function () {
backEndApp.init();
......@@ -134,11 +136,10 @@
<input name="image" type="file" class="j_search_image" style="opacity: 0;width: 100%;"
accept=".png, .jpg, .jpeg">
</div>
<div class="icon icon-voice2"></div>
</button>
<%--<button class="btn navbar-search-microphone" type="button">--%>
<%--<div class="icon icon-microphone"></div>--%>
<%--</button>--%>
<button class="btn navbar-search-microphone" type="button">
<div class="icon icon-microphone"></div>
</button>
</div>
<button class="btn btn-inverse btn-lg" type="submit">进入词条</button>
<button class="btn btn-default btn-lg" type="submit">搜索词条</button>
......
serverside/cihai-pc/src/main/webapp/WEB-INF/jsp/word/statement_baike.jsp
......@@ -685,7 +685,7 @@
<div class="row list-img list-gallery">
<c:forEach items="${vo.videos}" var="item">
<figure class="col-xs-6">
<a href="${item.file}" target="_blank" data-size="202x146">
<a data-src="${item.file}" class="m-video" data-size="202x146">
<%--<video class="img-responsive" src="${item.file}">--%>
<img class="img-responsive" src="/static/temp/word/${item.alt}">
</a>
......@@ -697,7 +697,7 @@
<div class="row list-img list-gallery">
<c:forEach items="${vo.audios}" var="item">
<figure class="col-xs-6">
<a href="${item.file}" target="_blank" data-size="202x146">
<a data-src="${item.file}" class="m-video" data-size="202x146">
<img class="img-responsive" src="/static/temp/word/${item.alt}">
</a>
</figure>
......@@ -980,6 +980,21 @@
}
})
})
// layer
$(".js-video").click(function () {
$(this).toggleClass("active").siblings().removeClass("active")
if ($("#collapse").is(":visible")) $("#collapse").slideUp()
layer.open({
type: 1,
content: $("#calligraphy"),
area: ['900px'],
title: false,
btn: [],
cancel: function () {
$(".js-calligraphy").removeClass("active")
}
})
})
// 复制
var clipboard = new Clipboard(".js-copy")
$(".js-copy").click(function (e) {
......
serverside/cihai-pc/src/main/webapp/static/css/video.css 0 → 100644
ul,
li {
padding: 0;
margin: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*
* 视频播放器
* */
.video-box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
font-size: 0;
z-index: 99999999999;
}
.video-box button {
display: inline-block;
padding: 0;
border: 0 none;
background: none;
text-align: center;
outline: none;
cursor: pointer;
}
.video-box .video-button {
display: inline-block;
width: 36px;
height: 36px;
color: #fff;
position: relative;
overflow: hidden;
}
.video-box .video-button i {
font-size: 56px;
}
.video-box .video-button.video-btn-volume i {
font-size: 20px;
}
.video-box .video-button.video-tooltip-toggle i {
font-size: 20px;
}
.video-box .video-video {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.video-box .video-video video {
position: relative;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
}
.video-box .video-container {
width: 852px;
min-height: 550px;
max-height: 90vh;
background: #000000;
overflow: hidden;
opacity: 0;
}
.video-box .video-container.video-ready {
opacity: 1;
}
.video-box.quanping .video-container {
width: 100%;
height: 100%;
max-height: 100%;
position: relative;
left: 0;
top: 0;
transform: none;
}
.video-box.video-playing .video-div.video-hide-ui .video-ui {
-webkit-transform: translateY(39px);
-ms-transform: translateY(39px);
transform: translateY(39px);
}
.video-box.heibian .video-container {
padding: 40px 0;
}
.video-box.heibian .video-div.video-hide-ui .video-ui {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.video-box.heibian.quanping .video-container {
padding: 0;
}
.video-box.hideui .video-div .video-ui {
-webkit-transform: translateY(39px);
-ms-transform: translateY(39px);
transform: translateY(39px);
}
.video-box .i {
font-family: none;
height: 100%;
width: 100%;
background-size: 80%;
background-position: center;
background-repeat: no-repeat;
}
.video-box .i:before,
.video-box i:after {
display: none !important;
}
.video-box .i-voice-on {
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2030'%20%20%3E%3Cg%20%20stroke%3D'%23fff'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2%2C10L2%2C20L5%2C20L13%2C25L13%2C5L5%2C10L5%2C10Z'%2F%3E%3Cpath%20d%3D'M18%2C10C%2022%2C12%2022%2C18%2018%2C20'%20%2F%3E%3Cpath%20d%3D'M22%2C6C%2028%2C10%2028%2C20%2022%2C24'%20%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.video-box .i-voice-off {
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2030'%20%20%3E%3Cg%20%20stroke%3D'%23fff'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20%3E%3Cpath%20d%3D'M2%2C10L2%2C20L5%2C20L13%2C25L13%2C5L5%2C10L5%2C10Z'%2F%3E%3Cpath%20d%3D'M18%2C11L27%2C20'%20%2F%3E%3Cpath%20d%3D'M18%2C20L27%2C11'%20%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.video-box .i-bofang {
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2030'%3E%3Cg%20fill%3D'%23fff'%20stroke%3D'%23fff'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M10%2C7L10%2C23L24%2C15z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.video-box .i-zhanting {
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2030'%3E%3Cg%20fill%3D'%23fff'%20stroke%3D'%23fff'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%2C7L7%2C23L11%2C23L11%2C7z'%2F%3E%3Cpath%20d%3D'M20%2C7L20%2C23L24%2C23L24%2C7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.video-box .i-quanping {
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2030'%20%20%3E%3Cg%20%20stroke%3D'%23fff'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20%3E%3Cpath%20d%3D'M6%2C10L6%2C6L10%2C6'%2F%3E%3Cpath%20d%3D'M6%2C21L6%2C25L10%2C25'%2F%3E%3Cpath%20d%3D'M20%2C6L24%2C6L24%2C10'%2F%3E%3Cpath%20d%3D'M20%2C25L24%2C25L24%2C21'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.video-box .i-suoxiao {
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2030'%20%20%3E%3Cg%20%20stroke%3D'%23fff'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20%3E%3Cpath%20d%3D'M6%2C10L10%2C10L10%2C6'%2F%3E%3Cpath%20d%3D'M6%2C21L10%2C21L10%2C25'%2F%3E%3Cpath%20d%3D'M20%2C6L20%2C10L24%2C10'%2F%3E%3Cpath%20d%3D'M20%2C25L20%2C21L24%2C21'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.video-bg {
position: absolute;
height: 100%;
width: 100%;
background: #000;
opacity: .9;
}
.video-div {
background: #000;
font-size: 0;
letter-spacing: -1px;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.video-ui {
position: absolute;
width: 100%;
height: 41px;
background-color: rgba(0, 0, 0, 0.8);
left: 0;
bottom: 0;
z-index: 6;
letter-spacing: .25px;
-webkit-transition: transform 0.3s ease;
-o-transition: transform 0.3s ease;
-ms-transition: transform 0.3s ease;
-moz-transition: transform 0.3s ease;
transition: transform 0.3s ease;
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
.video-loading-pulse {
position: absolute;
width: 6px;
height: 24px;
top: 50%;
left: 50%;
background-color: rgba(255, 255, 255, 0.2);
-webkit-animation: pulse 750ms infinite;
animation: pulse 750ms infinite;
-webkit-animation-delay: 250ms;
animation-delay: 250ms;
}
.video-loading-pulse:before,
.video-loading-pulse:after {
content: '';
position: absolute;
display: block;
height: 16px;
width: 6px;
background: rgba(255, 255, 255, 0.2);
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-animation: pulse 750ms infinite;
animation: pulse 750ms infinite;
}
.video-loading-pulse:before {
left: -12px;
}
.video-loading-pulse:after {
left: 12px;
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
}
@keyframes pulse {
50% {
background: white;
}
}
.video-loading {
opacity: 1;
color: #2c97f6;
font-size: 0;
overflow: hidden;
box-shadow: 0px 0px 0px 3600px #000;
background: #000;
width: 30px;
height: 30px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.video-loading i {
border-radius: 50%;
width: 24px;
height: 24px;
display: block;
border: 0.25rem solid rgba(255, 255, 255, 0.2);
border-top-color: white;
-webkit-animation: adeg 1s infinite linear;
-o-animation: adeg 1s infinite linear;
-ms-animation: adeg 1s infinite linear;
-moz-animation: adeg 1s infinite linear;
animation: adeg 1s infinite linear;
}
.video-loading .i-loading:before {
display: none;
opacity: 0;
visibility: hidden;
}
.video-loading.yihuanchun {
opacity: 0;
}
@keyframes adeg {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.video-close {
position: absolute;
top: calc(52px + 2%);
right: 5%;
width: 30px;
height: 30px;
cursor: pointer;
background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2030'%3E%3Cg%20fill%3D'%23fff'%3E%3Cpath%20d%3D'M0%2C1L1%2C0L30%2C29L29%2C30z'%2F%3E%3Cpath%20d%3D'M29%2C0L29%2C0L30%2C1L1%2C30L0%2C29z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
}
.video-bofang.f-czspjuzhong {
z-index: 2;
font-size: 0;
}
.video-bofang.f-czspjuzhong i {
display: block;
border-radius: 50%;
text-align: center;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
width: 60px;
height: 60px;
cursor: pointer;
line-height: 62px;
font-size: 66px;
-webkit-transition: transform 1s;
-o-transition: transform 1s;
-ms-transition: transform 1s;
-moz-transition: transform 1s;
transition: transform 1s;
}
.video-hide {
z-index: 0 !important;
}
.video-hide i {
opacity: 0;
-webkit-transform: scale(3);
-o-transform: scale(3);
-ms-transform: scale(3);
-moz-transform: scale(3);
transform: scale(3);
will-change: transform, opacity;
z-index: 0;
}
.video-progress {
display: block;
position: absolute;
width: 100%;
bottom: 36px;
height: 5px;
cursor: pointer;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
z-index: 2;
}
.video-progress:hover .video-progress-hover,
.video-progress:hover .video-tooltip-time {
opacity: 1;
}
.video-tooltip-time {
width: 46px;
position: absolute;
height: 20px;
z-index: 5;
left: 0;
right: 0;
bottom: 8px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.video-tooltip-time .video-tinytip-content {
margin-left: -23px;
}
.video-tooltip-time .video-text {
background: rgba(0, 0, 0, 0.5);
padding: 2px;
border-radius: 2px;
}
.video-tinytip .video-tooltip-content {
display: inline-block;
padding: 0 4px;
color: rgba(255, 255, 255, 0.5);
font-size: 10px;
line-height: 20px;
text-align: center;
}
.video-progress-padding {
position: absolute;
width: 100%;
height: 16px;
bottom: 0;
z-index: 40;
cursor: pointer;
}
.video-progress-list {
position: relative;
top: -1px;
z-index: 39;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.2);
-webkit-transform: scaleY(0.6);
-ms-transform: scaleY(0.6);
transform: scaleY(0.6);
transition: -webkit-transform 0.1s cubic-bezier(0.4, 0, 1, 1);
transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1);
transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 1, 1);
}
.video-progress-play,
.video-progress-buffer,
.video-progress-hover {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
}
.video-progress-buffer {
z-index: 33;
background-color: rgba(255, 255, 255, 0.4);
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.video-progress-hover {
z-index: 34;
background-color: rgba(255, 255, 255, 0.5);
opacity: 0;
-webkit-transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
-o-transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
-ms-transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
-moz-transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
}
.video-progress-play {
z-index: 35;
background-color: #2c97f6;
}
.video-progress-handle {
width: 13px;
height: 13px;
position: absolute;
top: 50%;
right: -6.5px;
margin-top: -6.5px;
border-radius: 50%;
background-color: #2c97f6;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
transition: -webkit-transform 0.1s cubic-bezier(0.4, 0, 1, 1);
transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1);
transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 1, 1);
}
.video-progress-padding:hover + .video-progress-list {
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
}
.video-progress-padding:hover + .video-progress-list .video-progress-handle {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.video-controls-buttons {
position: absolute;
bottom: 0;
left: 0;
height: 36px;
width: 100%;
padding: 0 10px;
z-index: 3;
}
.video-time-panel {
font-size: 12px;
color: #777;
display: inline-block;
vertical-align: top;
height: 36px;
padding: 0 5px;
line-height: 36px;
letter-spacing: .25px;
}
.video-time-panel-current {
color: #DEDEDF;
}
.video-fullscreen {
float: right;
}
.video-definition {
float: right;
width: 55px;
height: 36px;
position: relative;
}
.video-definition .video-button {
width: 100%;
}
.video-definition .video-button span {
background: #fff;
color: #333;
font-size: 14px;
padding: 2px 5px;
}
.video-definition .video-tooltip-content {
width: 80px;
left: 50%;
margin-left: -40px;
display: none;
background: rgba(0, 0, 0, 0.5);
}
.video-definition:hover .video-tooltip-content {
position: absolute;
bottom: 35px;
color: #aaa;
display: block;
z-index: 6;
}
.video-menu .video-menu-item {
display: block;
width: 100%;
line-height: 36px;
font-size: 14px;
text-align: center;
white-space: nowrap;
padding: 0 12px;
cursor: pointer;
position: relative;
height: 38px;
background: -webkit-linear-gradient(top, transparent 0, transparent 50%, rgba(255, 255, 255, 0.1) 50%) center bottom no-repeat;
background-size: 80% 1px;
}
.video-menu .video-menu-item:hover {
color: #fff;
background: rgba(255, 255, 255, 0.12);
}
.video-menu .video-menu-item.video-active {
color: #FF8F00;
}
.video-volume {
float: right;
position: relative;
}
.video-popup .video-popup-content {
transform: scaleY(0);
bottom: 41px;
position: absolute;
}
.video-popup .video-popup-content:after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
margin-left: -5px;
border: 5px solid transparent;
border-top-color: rgba(0, 0, 0, 0.5);
}
.video-popup:hover .video-popup-content {
-webkit-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
-moz-transform: scaleY(1);
transform: scaleY(1);
}
.video-volume-slider {
left: 0;
width: 36px;
height: 100px;
cursor: pointer;
background: rgba(0, 0, 0, 0.8);
}
.video-tinytip-tiao {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-volume-range {
position: absolute;
left: 16px;
top: 10px;
width: 4px;
height: 80px;
background-color: rgba(0, 0, 0, 0.2);
}
.video-volume-range-current {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 50%;
background-color: #2c97f6;
}
.video-volume-handle {
position: absolute;
top: 0;
left: -4px;
width: 12px;
height: 3px;
background-color: #fff;
}
@media (max-width: 998px) {
.video-box .video-container {
width: 80vw;
max-height: 80vh;
min-height: 44.9vw;
}
}
@media (max-width: 468px) {
.video-box .video-container {
width: 100vw;
min-height: 54.9vw;
}
.video-loading i {
font-size: 26px;
}
.video-definition {
display: none;
}
}
/*
* 视频结尾
* */
.f-czspjuzhong {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
serverside/cihai-pc/src/main/webapp/static/css1/vendor.css
This diff could not be displayed because it is too large.
serverside/cihai-pc/src/main/webapp/static/index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>index</title>
<link rel="stylesheet" href="css/vendor.css">
</head>
<body>
</head>
<body>
<div class="bg-video">
<video src="temp/xingkong.mp4" autoplay loop preload="true" x-webkit-airplay="true" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" controls></video>
<div class="bg-mask bg-mask-1"></div>
<video src="temp/xingkong.mp4" autoplay loop preload="true" x-webkit-airplay="true" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" controls="false"></video>
<div class="bg-mask bg-mask-1"></div>
</div>
<div class="wrapper-index">
<div class="header clearfix">
<div class="nav pull-left">
<a href="javascript:;">万国志</a>
<i>/</i>
<a href="javascript:;">地方志</a>
<i>/</i>
<a href="javascript:;">人物志</a>
</div>
<div class="login pull-right">
<a class="active" href="javascript:;">登录</a>
<a href="javascript:;">注册</a>
</div>
</div>
<div class="logo">
<img src="images/logo-search2.png" title="云辞海">
</div>
<div class="search-box clearfix">
<div class="input-group">
<input class="form-control" placeholder="输入关键词搜索">
</div>
<button class="btn-search pull-right" href="javascript:;">
<span class="icon-search"></span>
</button>
<a class="icon-camera" href="javascript:;"></a>
<div class="decoration-box box-3"></div>
<div class="decoration-box box-2"></div>
<div class="decoration-box box-1"></div>
</div>
<div class="radio-box clearfix">
<label class="radio-inline">
<input type="radio" name="search-type" checked>词头</label>
<label class="radio-inline">
<input type="radio" name="search-type">全文</label>
<label class="radio-inline">
<input type="radio" name="search-type">图片</label>
<label class="radio-inline">
<input type="radio" name="search-type">视频</label>
<div class="search-help">
<span class="icon-mark">?</span>
<a href="javascript:;">搜索助手</a>
</div>
</div>
<div class="link-box clearfix">
<a class="knowledge" href="http://cihai-pc.beckee.cn/word/592"></a>
<a class="word" href="http://cihai-pc.beckee.cn/word/1"></a>
<a class="cloud" href="javascript:;"></a>
<a class="today" href="http://cihai-pc.beckee.cn/today"></a>
<div class="header clearfix">
<div class="nav pull-left"><a href="javascript:;">万国志</a><i>/</i><a href="javascript:;">地方志</a><i>/</i><a href="javascript:;">人物志</a></div>
<div class="login pull-right"><a class="active" href="javascript:;">登录</a><a href="javascript:;">注册</a></div>
</div>
<div class="logo"><img src="images/logo-search2.png" title="云辞海"></div>
<div class="search-box clearfix">
<div class="input-group">
<input class="form-control" placeholder="输入关键词搜索">
</div>
<button class="btn-search pull-right" href="javascript:;"><span class="icon-search"></span></button>
<ul class="btn-sec clearfix">
<li><a class="icon-camera" href="javascript:;"></a></li>
<li><a class="icon-mic" href="javascript:;"></a></li>
</ul>
<div class="decoration-box box-3"></div>
<div class="decoration-box box-2"></div>
<div class="decoration-box box-1"></div>
</div>
<div class="search-wrap clearfix">
<div class="search-help"><a href="javascript:;">高级检索</a><a href="javascript:;">搜索助手</a><span class="icon-mark">?</span></div>
</div>
<div class="link-box clearfix"><a class="knowledge" href="http://cihai-pc.beckee.cn/word/592"></a><a class="word" href="http://cihai-pc.beckee.cn/word/1"></a><a class="cloud" href="javascript:;"></a><a class="today" href="http://cihai-pc.beckee.cn/today"></a></div>
</div>
<script src="js/plugins/jquery.min.js"></script>
<script src="js/plugins/layer/layer.js"></script>
<script src="js/vendor.js" merge="true"></script>
<script>
var $indexitemHover = $('.index-item-hover');
$('.index-item').hover(function() {
var $this = $(this),
_position = $this.position();
if (!$this.data('hover')) return;
$indexitemHover.attr('src', $this.data('hover')).css({
'width': 0.3125 * $(window).width(),
'left': _position.left + $this.width() - 40,
'top': _position.top + $this.height() - (0.4 * $this.height()),
'display': 'block'
})
}, function() {
$indexitemHover.hide();
})
var $indexitemHover = $('.index-item-hover');
$('.index-item').hover(function () {
var $this = $(this),
_position = $this.position();
if(!$this.data('hover')) return;
$indexitemHover.attr('src',$this.data('hover')).css({'width':0.3125*$(window).width(),'left':_position.left+$this.width()-40,'top':_position.top+$this.height()-(0.4*$this.height()),'display':'block'})
},function () {
$indexitemHover.hide();
})
</script>
</body>
</body>
</html>
\ No newline at end of file
serverside/cihai-pc/src/main/webapp/static/index2.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>index2</title>
<link rel="stylesheet" href="css/vendor.css">
</head>
<body>
</head>
<body>
<div class="bg-video">
<video src="temp/kongjian.mp4" autoplay loop preload="true" x-webkit-airplay="true" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" controls></video>
<div class="bg-mask bg-mask-2"></div>
<video src="temp/kongjian.mp4" autoplay loop preload="true" x-webkit-airplay="true" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" controls></video>
<div class="bg-mask bg-mask-2"></div>
</div>
<div class="wrapper-index">
<div class="index-top-left">
<img src="images/index-2-top-left.png" draggable="false">
</div>
<div class="index-top-right index-top-right-2">
<img src="images/index-2-top-right.png" draggable="false">
</div>
<div class="index-search index-search-2">
<img src="images/index-2-search.png" draggable="false">
</div>
<div class="index-item index-2-item">
<img src="images/index-2-item-1.png" draggable="false">
<img src="images/index-2-item-2.png" draggable="false">
<img src="images/index-2-item-3.png" draggable="false">
<img src="images/index-2-item-4.png" draggable="false">
</div>
<div class="index-top-left"><img src="images/index-2-top-left.png" draggable="false"></div>
<div class="index-top-right index-top-right-2"><img src="images/index-2-top-right.png" draggable="false"></div>
<div class="index-search index-search-2"><img src="images/index-2-search.png" draggable="false"></div>
<div class="index-item index-2-item"><img src="images/index-2-item-1.png" draggable="false"><img src="images/index-2-item-2.png" draggable="false"><img src="images/index-2-item-3.png" draggable="false"><img src="images/index-2-item-4.png" draggable="false">
</div>
</div>
<script src="js/plugins/jquery.min.js"></script>
<script src="js/plugins/layer/layer.js"></script>
<script src="js/vendor.js" merge="true"></script>
</body>
</body>
</html>
\ No newline at end of file
serverside/cihai-pc/src/main/webapp/static/js/pingzi_video.js 0 → 100644
$(document).ready(function() {
/*
* pc端判断
*/
function IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"
];
var flag = true;
for(var v = 0; v < Agents.length; v++) {
if(userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
/*
* 随机数
* */
function _charecter() {
var character = String.fromCharCode(Math.floor(Math.random() * 26) + "A".charCodeAt(0));
return character;
}
/*
* 补0
*/
function addzero(num) {
if(num < 10) {
return("0" + num);
} else {
return num;
}
}
/*
* 视频事件监听事件
*
* @eventName 视频事件名称
* @m 视频对象
* @fun 回调函数
*
*/
var eventTester = function(eventName, m, fun) {
if(window.addEventListener) {
m.addEventListener(eventName, function() {
if(fun) {
fun(this);
}
//console.log((new Date()).getTime(),eventName);
}, false);
} else {
m.attachEvent('on' + eventName, function() {
if(fun) {
fun(this);
}
// console.log((new Date()).getTime(),eventName);
});
}
}
/*
* 视频播放
*
*/
//视频播放
$(".m-video").on("click", function() {
if($(".video-box").length > 0) {
return;
}
document.ondragstart = function() {
return false;
};
window.onresize = function() {
iteme = setTimeout(function() {
if(!checkFull()) {
//要执行的动作
$("body").removeClass("noscroll");
$(".video-box").removeClass("quanping");
$(".video-fullscreen").find("i").removeClass("i-suoxiao").addClass("i-quanping");
} else {
$("body").addClass("noscroll");
$(".video-box").addClass("quanping");
$(".video-fullscreen").find("i").removeClass("i-quanping").addClass("i-suoxiao");
}
}, 0)
}
function checkFull() {
var explorer = window.navigator.userAgent.toLowerCase();
console.log(window.screen.width, window.outerWidth, window.screen.height, window.outerHeight)
if(explorer.indexOf('chrome') > 0) { //chrome
if((window.screen.width - window.outerWidth <= 17) && (window.screen.height - window.outerHeight <= 17)) {
return true;
} else {
return false;
}
} else { //IE 9+ fireFox
if(window.outerWidth == screen.width) {
return true;
} else {
return false;
}
}
}
function quanpin(elem) {
if(IsPC()) {
var elem = document.documentElement;
} else {
if(elem.paused && elem.networkState <= elem.HAVE_METADATA) {
elem.play();
setTimeout(function() {
elem.pause();
elem.webkitEnterFullScreen();
return;
}, 0);
} else {
elem.webkitEnterFullScreen();
return;
}
}
if(elem.requestFullscreen) {
//"W3C";
elem.requestFullscreen();
} else if(elem.mozRequestFullScreen) {
//FireFox
elem.mozRequestFullScreen();
} else if(elem.webkitRequestFullScreen) {
//Chrome等
elem.webkitRequestFullScreen();
} else if(elem.msRequestFullscreen) {
//IE11
console.log(11);
elem.msRequestFullscreen();
}
}
function exitquanping() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if(document.msExitFullscreen) {
document.msExitFullscreen();
}
}
var menuarr;
var menustr="";
if($(this).attr("data-menu")){
menuarr=$(this).attr("data-menu").split(" ");
$(menuarr).each(function(k){
menustr+="<li class='video-menu-item video-menu-item-"+k+" "+(k==0?"video-active":"")+"' >"+this+"</li>";
})
}
var datasrc = $(this).attr("data-src"),src='';
var dangqian="";
if(src.indexOf("mp4")<0&&$(this).attr("data-menu")){
dangqian=menuarr[0];
src = datasrc+dangqian+".mp4";
}else{
src = datasrc;
}
if(!src) {
alert("未添加视频链接");
}
console.log(src);
var menu=["<div class='video-definition video-tooltip '>",
"<button class='video-button video-tooltip-toggle video-definition-button'>",
"<span>"+dangqian+"</span>",
"</button>",
"<div class='video-tooltip-content'>",
"<ul class='video-menu'>",
menustr,
"</ul>",
"</div>",
"</div>"];
if(!$(this).attr("data-menu")){
menu=[]
}
var vClass = $(this).attr("data-heibian") ? "heibian" : "";
var videoid = "my" + _charecter() + _charecter();
var iteme = null;
var str = ["<div class='video-box " + vClass + "' id='" + videoid + "box'>",
"<div class='video-bg'></div>",
"<div class='video-loading-pulse'></div>",
"<div class='video-close'></div>",
"<div class='video-container f-czspjuzhong'>",
"<div class='video-div'>",
"<div class='video-video'>",
"<video id=" + videoid + " x-webkit-airplay='' playsinline='' webkit-playsinline='' ",
"src='" + src + "'",
">",
"</video>",
"</div>",
"<div class='video-bofang f-czspjuzhong '> <i class='i i-bofang '></i></div>",
"<div class='video-loading yihuanchun f-czspjuzhong'> <i class='i i-loading '></i></div>",
"<div class='video-ui'>",
"<div class='video-progress'>",
"<div class='video-tooltip video-tinytip video-tooltip-time'>",
"<button class='video-tooltip-toggle'>",
"<span class='video-tooltip-value'></span>",
"</button>",
"<div class='video-tooltip-content'>",
"<div class='video-tinytip-content'>",
"<span class='video-text'></span>",
"</div>",
"</div>",
"</div>",
"<div class='video-progress-padding'></div>",
"<div class='video-progress-list'>",
"<div class='video-progress-buffer'></div>",
"<div class='video-progress-hover'></div>",
"<div class='video-progress-play'><span class='video-progress-handle'></span></div>",
"</div>",
"</div>",
"<div class='video-controls-buttons'>",
"<button class='video-bofang video-button'> <i class='i i-bofang f-czspjuzhong'></i></button>",
"<span class='video-time-panel'>",
"<span class='video-time-panel-current'>00:00</span>",
"<span class='video-time-panel-split'>&nbsp&nbsp/&nbsp&nbsp</span>",
"<span class='video-time-panel-total'>00:00</span>",
"</span>",
"<div class='video-fullscreen'>",
"<button class='video-button video-tooltip-toggle video-fullscreen-default' type='button'>",
"<i class='i i-quanping f-czspjuzhong'></i>",
"</button>",
"</div>",
menu.join(""),
"<div class='video-volume video-popup'>",
"<button class='video-button video-btn-volume' data-state='volume'>",
"<i class='i i-voice-on f-czspjuzhong'></i>",
"</button>",
"<div class='video-volume-slider video-popup-content'>",
"<div class='video-volume-range'>",
"<div class='video-volume-range-current' style='height: 50%;'>",
"<div class='video-volume-handle'></div>",
"</div>",
"</div>",
"<div class='video-tinytip-tiao'></div>",
"</div>",
"</div>",
"</div>",
"</div>",
"</div>",
"</div>",
"</div>"
]
$("body").append(str.join(""));
var meido = document.getElementById(videoid);
meido.volume = .5;
var videobox = $("#" + videoid + "box");
/*视频缓存成功可以获取长度和播放*/
eventTester("waiting", meido, function() {
console.log(" 等待数据，并非错误");
$(".video-loading").removeClass("yihuanchun");
});
eventTester("playing", meido, function() {
console.log("播放了");
videobox.addClass("video-playing").removeClass("video-pause");
$(".video-loading").addClass("yihuanchun");
});
eventTester("stalled", meido, function() {
console.log("/网速失速");
});
eventTester("ended", meido, function() {
//console.log("播放结束");
// $(".video-close").click();
});
eventTester("canplay", meido, function() {
//console.log("可以播放");
$(".video-container",videobox).addClass("video-ready");
meido.canplay=true;
meido.play();
$(".video-bofang").find("i").removeClass("i-bofang").addClass("i-zhanting").css("transition","none");
});
eventTester("loadedmetadata", meido, function() {
//console.log("成功获取时长")
$(".video-time-panel-total").html(addzero(parseInt(meido.duration / 60)) + ":" + addzero(parseInt(meido.duration % 60)));
});
eventTester("suspend",meido,function(){
// $(".video-loading").removeClass("yihuanchun");
console.log("延迟下载")
})
eventTester("loadstart",meido,function(){
console.log("客户端开始请求数据")
$(".video-loading").removeClass("yihuanchun");
})
eventTester("progress",meido,function(){
$(".video-container",videobox).addClass("video-ready");
console.log("客户端正在请求数据")
})
/*进度相关*/
eventTester("timeupdate", meido, function() {
//console.log("播放时间改变");
if(meido.canplay){
var currentTime = meido.currentTime;
var buffered = meido.buffered.end(0);
var duration = meido.duration;
for(var i = 0; i < meido.buffered.length; i++) {
if(currentTime < meido.buffered.end(i)) {
buffered = meido.buffered.end(i);
break;
}
}
var buff_pro = parseInt((buffered / duration) * 100);
$(".video-time-panel-current").html(addzero(parseInt(currentTime / 60)) + ":" + addzero(parseInt(currentTime % 60)));
$(".video-progress-play").css("width", currentTime / duration * 100 + "%");
$(".video-progress-buffer").css("width", buff_pro + "%");
}
});
var mx = 0;
$(document).on("mousemove", function(e) {
mx = e.screenX;
})
eventTester("play", meido, function(e) {
videobox.addClass("video-playing").removeClass("video-pause");
$(".video-bofang.f-czspjuzhong").addClass("video-hide");
//var ny=e.cy
var px = mx;
clearTimeout(iteme);
iteme = setTimeout(function() {
if(px == mx) {
$(".video-div").addClass("video-hide-ui");
}
}, 5000);
});
eventTester("pause", meido, function() {
videobox.addClass("video-pause").removeClass("video-playing");
$(".video-bofang.f-czspjuzhong").removeClass("video-hide");
});
eventTester("ended", meido, function() {
videobox.removeClass("video-pause video-playing");
$(".video-bofang").find("i").removeClass("i-zhanting").addClass("i-bofang");
// $(".video-bofang.f-czspjuzhong").removeClass("video-hide");
});
/*
* 播放暂停切换
*
* */
$(".video-bofang,.video-video").on("click", function(e) {
if(IsPC() || e.currentTarget.classList[0] == "video-bofang" || e.target.classList[0] == "video-bofang") {
clearTimeout(iteme);
iteme = setTimeout(function() {
//do function在此处写单击事件要执行的代码
if($(".video-bofang").find("i").hasClass("i-bofang")) {
meido.play();
$(".video-bofang").find("i").removeClass("i-bofang").addClass("i-zhanting");
} else {
meido.pause();
$(".video-bofang").find("i").removeClass("i-zhanting").addClass("i-bofang");
}
},100);
} else {
if(videobox.hasClass("hideui")) {
videobox.removeClass("hideui");
} else {
videobox.addClass("hideui");
}
}
});
/*
* 双击全屏
*
* */
$(".video-video").on("dblclick", function() {
if(IsPC()) {
clearTimeout(iteme);
if(videobox.hasClass("quanping")) {
exitquanping();
} else {
quanpin();
}
}
});
/*
*
* 鼠标移入隐藏UI
*
* */
$(".video-ui").on("mouseleave", function() {
clearTimeout(iteme);
iteme = setTimeout(function() {
//do function在此处写单击事件要执行的代码
$(".video-div").addClass("video-hide-ui");
}, 5000);
});
$(".video-ui").on("mouseenter", function() {
$(".video-div").removeClass("video-hide-ui");
});
/*
*
* 关闭video
*
* */
$(".video-close").on("click touchstart", function() {
videobox.remove();
});
//进度条面板相对浏览器的左边的距离
var parent_left = 0;
//鼠标位置相对浏览器的左边的距离
var e_left = 0;
/*
* 进度条
*/
$(".video-progress", videobox).on("mousemove touchmove", function(e) {
var event;
if(e.offsetX) {
event = e;
} else if(e.originalEvent.changedTouches[0].clientX) {
event = e.originalEvent.changedTouches[0];
}
parent_left = $(this).offset().left;
//鼠标位置相对浏览器的左边的距离
e_left = event.pageX;
var width = e_left - parent_left;
var wb = (width / $(this).width());
var tt = wb * meido.duration;
$(".video-tooltip", $(this)).css({
"left": (wb * 100) + "%"
});
$(".video-progress-hover", videobox).css({
"width": (wb * 100) + "%"
});
$(".video-text", videobox).html(addzero(parseInt(tt / 60)) + ":" + addzero(parseInt(tt % 60)));
});
$(".video-progress", videobox).on("click touchstart touchend", function(e) {
videobox.removeClass("video-playing");
var percent = ($(".video-progress-hover", videobox).width() / $(this).width());
console.log(percent);
meido.currentTime = (percent * meido.duration);
});
/*
* 音量
*/
var canMove = false;
$(".video-tinytip-tiao", videobox).on("mousedown", function(e) {
canMove = true;
console.log(canMove);
var zi = $(".video-volume-range-current", videobox);
if(canMove) {
volumeh = 1 - e.offsetY / $(this).height();
console.log(volumeh);
zi.css("height", volumeh * 100 + "%")
} else {
return;
}
});
$(document).on("mouseup", function(e) {
canMove = false;
});
var volumeh = 0;
$(".video-tinytip-tiao", videobox).on("mousemove ", function(e) {
var zi = $(".video-volume-range-current", videobox);
var hh = $(".video-volume-range", videobox);
if(canMove) {
console.log(e);
volumeh = 1 - (e.offsetY - 16) / hh.height();
console.log(volumeh);
if(volumeh <= 0) {
$(".video-btn-volume i").removeClass("i-voice-on").addClass("i-voice-off");
} else if(volumeh > 1) {
volumeh = 1;
} else {
$(".video-btn-volume i").removeClass("i-voice-off").addClass("i-voice-on");
}
zi.css("height", volumeh * 100 + "%")
meido.volume = volumeh;
} else {
return;
}
});
$(".video-btn-volume", videobox).on("click", function() {
if($(this).find("i").hasClass("i-voice-on")) {
meido.volume = false;
volumeh = $(".video-volume-range-current", videobox).height() / $(".video-volume-range", videobox).height();
console.log(volumeh);
$(".video-volume-range-current", videobox).css("height", 0 + "%");
$(".video-btn-volume i").removeClass("i-voice-on").addClass("i-voice-off");
} else {
meido.volume = true;
$(".video-volume-range-current", videobox).css("height", volumeh * 100 + "%");
$(".video-btn-volume i").removeClass("i-voice-off").addClass("i-voice-on");
}
})
/*
* 音量 结尾
*/
/*
* 全屏
*/
$(".video-fullscreen", videobox).on("click", function() {
if($(this).find("i").hasClass("i-quanping")) {
quanpin(meido);
} else {
console.log("退出全屏");
exitquanping();
}
})
/*
* 全屏结尾
*/
/*
* 切换清晰度
*/
$(".video-menu-item").on("click",function(){
if($(this).hasClass("video-active")){
return ;
}
$(this).addClass("video-active").siblings().removeClass("video-active");
$(".video-definition-button span").html($(this).html());
var duration=meido.currentTime;
meido.canplay=false;
meido.pause();
meido.src=datasrc+$(this).html()+".mp4";
meido.currentTime=duration;
});
});
})
\ No newline at end of file
serverside/cihai-pc/src/main/webapp/static/js/vendor.js
This diff could not be displayed because it is too large.
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!