detail.html
3.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<include file="public@head_common"/>
<link rel="stylesheet" type="text/css" href="__TMPL__/public/mobile/css/register_login/video.css" />
<link rel="stylesheet" type="text/css" href="__TMPL__/public/mobile/css/augly.css" />
<title>相关视频</title>
<style type="text/css">
.star {
position: absolute;
z-index: 10;
width: 2rem;
height: 2rem;
border: 4px solid #FFFFFF;
border-radius: 50%;
left: 50%;
margin-left: -1rem;
top: 50%;
transform: translateY(-1rem);
}
.video_wrap {
position: relative;
}
.sanjiao {
width: 0;
height: 0;
border-left: 0.6rem solid #FFFFFF;
border-top: 0.4rem solid transparent;
border-bottom: 0.4rem solid transparent;
border-radius: 0.1rem;
left: 50%;
position: absolute;
margin-left: -0.2rem;
top: 50%;
margin-top: -0.4rem;
}
</style>
</head>
<body>
<div class="header">
<div class="return">
<span class="back_href">
<i class="iconfont icon-jiantou-copy"></i>返回
</span>
</div>
相关视频
</div>
<div class="container" style="background: url(__TMPL__/public/mobile/images/backgroundimg.png)">
<!--video-->
<div class="video_wrap">
<!--<div class="star">-->
<!--<div class="sanjiao">-->
<!--</div>-->
<!--</div>-->
<video class="index_video" src="{$babyInfo.video_url}" controls
style="object-fit:fill; width:100%; height:3.9rem"
webkit-playsinline="true"
x-webkit-airplay="true"
playsinline="true"
x5-video-player-type="h5"
x5-video-orientation="h5"
x5-video-player-fullscreen="true"
preload="auto" width="100%" height="100%" ></video>
</div>
<div class="video_text">
<p class="h_first">{$babyInfo.title}</p>
<div class="video_text_detail">{:cmf_replace_content_file_url(htmlspecialchars_decode($babyInfo.content))}</div>
</div>
<div class="bottom_icon">
<img src="__TMPL__/public/mobile/images/biglogo@2x.png" class="bottom_img" />
<p class="bottom_text">{$site_info.site_name}</p>
</div>
</div>
<script src="__TMPL__/public/mobile/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="__TMPL__/public/mobile/js/swiper-4.3.5.min.js" type="text/javascript" charset="utf-8"></script>
<script src="__TMPL__/public/mobile/js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//点击开始star
var star = document.getElementsByClassName('star')[0];
var video_wrap = document.getElementsByClassName('video_wrap')[0];
var index_video = document.getElementsByClassName('index_video')[0];
star.onclick = function(ev) {
var oEvent = ev || event;
oEvent.cancelBubble = true;
this.style.display = 'none';
if(index_video.paused) {
index_video.play();
} else {
index_video.pause();
}
}
video_wrap.onclick = function() {
star.style.display = 'block'
if(!index_video.paused) {
index_video.pause();
}
}
</script>
</body>
</html>