88 lines
2.6 KiB
PHTML
Executable File
88 lines
2.6 KiB
PHTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<script type="text/javascript">
|
|
var navID = "1";
|
|
</script>
|
|
<link rel="stylesheet" type="text/css" href="__PUBLIC__/m_web/js/video/jsmodern.min.css">
|
|
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
|
|
<script type="text/javascript" src="__PUBLIC__/m_web/js/video/jsmodern.min.js"></script>
|
|
</head>
|
|
<style>
|
|
#video {
|
|
width: 970px;
|
|
height: 594px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
|
|
#video video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: fill;
|
|
}
|
|
|
|
.VideoBtn {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
display: block;
|
|
width: 70px;
|
|
height: 70px;
|
|
margin-left: -35px;
|
|
margin-top: -35px;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
}
|
|
</style>
|
|
-
|
|
</head>
|
|
<body class="bodyBg">
|
|
<div id="video">
|
|
<video src="http://old.oricogroup.com/data/video/orico_UCI2C.mp4" id="videoShow"></video>
|
|
<span class="VideoBtn"><img src="__PUBLIC__/m_web/js/video/bo1.png"></span>
|
|
</div>
|
|
<script>
|
|
$(function () {
|
|
//视频
|
|
jsModern.video("#video");
|
|
//播放视频
|
|
$(".VideoBtn").click(function () {
|
|
var video = document.getElementById("videoShow");
|
|
video.play();
|
|
$('.VideoBtn').hide();
|
|
})
|
|
//监听视频的播放状态
|
|
var video = document.getElementById("videoShow");
|
|
video.oncanplay = function () {
|
|
$(".VideoBtn").show();
|
|
//$("#video").attr("poster","");
|
|
}
|
|
//视频播放事件
|
|
video.onplay = function () {
|
|
$("#videoShow").attr("poster", "");
|
|
$(".VideoBtn").hide();
|
|
};
|
|
video.onplaying = function () {
|
|
$(".VideoBtn").hide();
|
|
};
|
|
|
|
//视频暂停事件
|
|
video.onpause = function () {
|
|
$(".VideoBtn").show();
|
|
};
|
|
//点击视频周围暂停播放图片出现
|
|
video.onclick = function () {
|
|
if (video.paused) {
|
|
$(".VideoBtn").hide();
|
|
video.play();
|
|
} else {
|
|
$(".VideoBtn").show();
|
|
video.pause();
|
|
}
|
|
};
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |