|
|
@@ -5,7 +5,9 @@
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
|
|
|
- <title><%= title %></title>
|
|
|
+ <title>
|
|
|
+ <%= title %>
|
|
|
+ </title>
|
|
|
|
|
|
<meta name="description" content="<%= description %>">
|
|
|
<meta property="og:title" content="<%= title %>">
|
|
|
@@ -23,12 +25,12 @@
|
|
|
<meta property="al:ios:app_name" content="Art Number Coloring Book" /> <!-- **iOS 应用名称** -->
|
|
|
|
|
|
<meta property="al:android:package" content="com.pcoloring.art.puzzle.color.by.number" /> <!-- **Android 包名** -->
|
|
|
- <meta property="al:android:url" content="<%= applink %>>" />
|
|
|
+ <meta property="al:android:url" content="<%= applink %>" />
|
|
|
<!-- ** Universal Link 路径** -->
|
|
|
<meta property="al:android:app_name" content="Art Number Coloring Book" /> <!-- **Android 应用名称** -->
|
|
|
|
|
|
<meta name="apple-itunes-app" content="app-id=1575480118">
|
|
|
-
|
|
|
+
|
|
|
|
|
|
<link rel="stylesheet" href="/stylesheets/v2/styles.css">
|
|
|
<style>
|
|
|
@@ -62,7 +64,8 @@
|
|
|
border-radius: 8px;
|
|
|
overflow: hidden;
|
|
|
cursor: pointer;
|
|
|
- aspect-ratio: 1/1; /* 修改为1:1比例 */
|
|
|
+ aspect-ratio: 1/1;
|
|
|
+ /* 修改为1:1比例 */
|
|
|
}
|
|
|
|
|
|
.video-player video {
|
|
|
@@ -196,7 +199,7 @@
|
|
|
</style>
|
|
|
|
|
|
|
|
|
-<script type="application/ld+json">
|
|
|
+ <script type="application/ld+json">
|
|
|
{
|
|
|
"@context": "https://schema.org",
|
|
|
"@type": "VideoObject",
|
|
|
@@ -221,7 +224,7 @@
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<script type="application/ld+json">
|
|
|
+ <script type="application/ld+json">
|
|
|
{
|
|
|
"@context": "https://schema.org",
|
|
|
"@type": "CollectionPage",
|
|
|
@@ -275,8 +278,11 @@
|
|
|
<a href="/">Home</a> > <a href="/video-coloring-pages">Video Coloring Pages</a> > <%= title%>
|
|
|
</div>
|
|
|
<section>
|
|
|
- <h1><%= title%></h1>
|
|
|
- <h4 style="margin-bottom: 40px;">By Art Number Coloring / <%=data.timeCreate%></h4>
|
|
|
+ <h1>
|
|
|
+ <%= title%>
|
|
|
+ </h1>
|
|
|
+ <h4 style="margin-bottom: 40px;">By Art Number Coloring / <%=data.timeCreate%>
|
|
|
+ </h4>
|
|
|
|
|
|
|
|
|
|
|
|
@@ -292,11 +298,13 @@
|
|
|
<div class="lineart-container">
|
|
|
<a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
|
|
|
<div class="lineart-overlay">
|
|
|
- <div class="lineart-title"><%= item.title %></div>
|
|
|
+ <div class="lineart-title">
|
|
|
+ <%= item.title %>
|
|
|
+ </div>
|
|
|
<div class="lineart-desc">Click to download or color online along with the video</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <% }); %>
|
|
|
+ <% }); %>
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
@@ -307,49 +315,49 @@
|
|
|
|
|
|
<%- include('footer') %>
|
|
|
|
|
|
- <script src="/scripts/script.js"></script>
|
|
|
- <script src="/scripts/progress2.js"></script>
|
|
|
-
|
|
|
- <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
|
|
- <script>
|
|
|
- const storyVideo = document.getElementById('storyVideo');
|
|
|
- const video = storyVideo.querySelector('video');
|
|
|
- const playButton = storyVideo.querySelector('.play-button');
|
|
|
- // 视频播放控制
|
|
|
- if (Hls.isSupported()) {
|
|
|
- var hls = new Hls();
|
|
|
- var url = '<%= data.url %>';
|
|
|
- hls.loadSource(url);
|
|
|
- hls.attachMedia(video);
|
|
|
- } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
|
|
- // Safari 不支持 hls.js 但原生支持 HLS
|
|
|
- video.src = '<%= data.url %>';
|
|
|
- } else {
|
|
|
- // 浏览器不支持 HLS
|
|
|
- console.error('Your browser does not support HLS.');
|
|
|
- }
|
|
|
-
|
|
|
- playButton.addEventListener('click', () => {
|
|
|
+ <script src="/scripts/script.js"></script>
|
|
|
+ <script src="/scripts/progress2.js"></script>
|
|
|
+
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
|
|
+ <script>
|
|
|
+ const storyVideo = document.getElementById('storyVideo');
|
|
|
+ const video = storyVideo.querySelector('video');
|
|
|
+ const playButton = storyVideo.querySelector('.play-button');
|
|
|
+ // 视频播放控制
|
|
|
+ if (Hls.isSupported()) {
|
|
|
+ var hls = new Hls();
|
|
|
+ var url = '<%= data.url %>';
|
|
|
+ hls.loadSource(url);
|
|
|
+ hls.attachMedia(video);
|
|
|
+ } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
|
|
+ // Safari 不支持 hls.js 但原生支持 HLS
|
|
|
+ video.src = '<%= data.url %>';
|
|
|
+ } else {
|
|
|
+ // 浏览器不支持 HLS
|
|
|
+ console.error('Your browser does not support HLS.');
|
|
|
+ }
|
|
|
+
|
|
|
+ playButton.addEventListener('click', () => {
|
|
|
video.play();
|
|
|
playButton.style.display = 'none';
|
|
|
- });
|
|
|
-
|
|
|
- // 视频播放时隐藏play button
|
|
|
- video.addEventListener('play', () => {
|
|
|
- playButton.style.display = 'none';
|
|
|
- });
|
|
|
-
|
|
|
- // 视频暂停时显示播放按钮
|
|
|
- video.addEventListener('pause', () => {
|
|
|
- playButton.style.display = 'flex';
|
|
|
- });
|
|
|
-
|
|
|
- // 视频结束时显示播放按钮
|
|
|
- video.addEventListener('ended', () => {
|
|
|
- playButton.style.display = 'flex';
|
|
|
- });
|
|
|
-
|
|
|
- </script>
|
|
|
+ });
|
|
|
+
|
|
|
+ // 视频播放时隐藏play button
|
|
|
+ video.addEventListener('play', () => {
|
|
|
+ playButton.style.display = 'none';
|
|
|
+ });
|
|
|
+
|
|
|
+ // 视频暂停时显示播放按钮
|
|
|
+ video.addEventListener('pause', () => {
|
|
|
+ playButton.style.display = 'flex';
|
|
|
+ });
|
|
|
+
|
|
|
+ // 视频结束时显示播放按钮
|
|
|
+ video.addEventListener('ended', () => {
|
|
|
+ playButton.style.display = 'flex';
|
|
|
+ });
|
|
|
+
|
|
|
+ </script>
|
|
|
|
|
|
</body>
|
|
|
|
