guoziyun
/
artsite


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
							<!DOCTYPE html>
<html lang="en">

<head>
  <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>

  <meta name="description" content="<%= description %>">
  <meta property="og:title" content="<%= title %>">
  <meta property="og:description" content="<%= description %>">
  <meta property="og:image" content="<%= data.poster %>">
  <meta property="og:type" content="website">

  <!-- MARK: Universal Link / Android App Link 的核心配置 -->
  <!-- 这些 meta 标签的值应该是完整的 HTTPS 链接，Facebook 会识别并尝试拉起 App -->
  <meta property="og:url" content="<%= applink %>" />
  <!-- **Universal Link 路径** -->
  <meta property="al:ios:url" content="<%= applink %>" />
  <!-- **Universal Link 路径** -->
  <meta property="al:ios:app_store_id" content="1575480118" /> <!-- **iOS App Store ID** -->
  <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 %>>" />
  <!-- ** 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>
    h1 {
      text-align: start;
    }

    p {
      font-size: 1.1rem;
    }

    .breadcrumb {
      margin: 20px 0;
      font-size: 1.0rem;
      color: var(--light-text);
    }

    .breadcrumb a {
      color: var(--primary-color);
      text-decoration: none;
    }

    .breadcrumb a:hover {
      text-decoration: underline;
    }

    /* 视频播放器样式 */
    .video-player {
      position: relative;
      background-color: #000;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      aspect-ratio: 1/1; /* 修改为1:1比例 */
    }

    .video-player video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80px;
      height: 80px;
      background-color: rgba(255, 107, 107, 0.8);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .play-button:hover {
      background-color: rgba(255, 107, 107, 1);
      transform: translate(-50%, -50%) scale(1.1);
    }

    .play-button::after {
      content: "";
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      border-left: 25px solid white;
      margin-left: 5px;
    }

    /* 线稿图样式 */
    .lineart-container {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      aspect-ratio: 1/1;
      /* 修改为1:1比例 */
      background-color: #f5f5f5;
    }

    .lineart-container img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      /* 使用contain保持图像比例 */
      padding: 15px;
      /* 添加内边距，使图像不贴边 */
      transition: all 0.3s ease;
    }

    /* 线稿图悬停效果 */
    .lineart-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
      padding: 15px;
      color: white;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .lineart-container:hover .lineart-overlay {
      opacity: 1;
    }

    .lineart-container img:hover {
      transform: translateY(-5px);
    }

    .lineart-title {
      font-weight: 600;
      margin-bottom: 5px;
    }

    .lineart-desc {
      font-size: 0.9rem;
      opacity: 0.9;
    }


    .coloring-grid {
      grid-template-columns: 1fr 1fr;
    }

    .gallery-link {
      text-align: center;
      margin-top: 30px;
      font-size: 1.2rem;
    }

    .gallery-link a {
      color: var(--primary-color);
      text-decoration: none;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
    }

    .gallery-link a:hover {
      text-decoration: underline;
    }

    .gallery-link svg {
      margin-left: 8px;
      width: 16px;
      height: 16px;
    }


    @media (max-width: 768px) {
      .gallery-link {
        font-size: 1rem;
      }

      .coloring-grid {
        grid-template-columns: 1fr;
      }
    }
  </style>


<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "Dog Riding an Electric Scooter - Video Story Coloring Page",
  "description": "Watch the real-life story of a dog riding an electric scooter that inspired our coloring page. Then, color it yourself!",
  "thumbnailUrl": "<%= data.poster %>",
  "uploadDate": "<%=data.timeCreate%>",
  "contentUrl": "<%= data.url %>",
  "duration": "PT11S",
  "potentialAction": {
    "@type": "WatchAction",
    "target": {
      "@type": "EntryPoint",
      "url": "https://art.pcoloring.com<%= uri %>"
    }
  },
  "interactionStatistic": {
    "@type": "InteractionCounter",
    "interactionType": "https://schema.org/WatchAction",
    "userInteractionCount": 2353
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "CollectionPage",
  "name": "<%= title %>",
  "description": "<%= description %>",
  "url": "https://art.pcoloring.com<%= uri %>",
  "mainEntity": {
    "@type": "ItemList",
    "itemListElement": [
    <% data.contents.forEach((item, index)=> { %>
      {
        "@type": "ListItem",
        "position": <%= index+1 %>,
        "item": {
          "@type": "CreativeWork",
          "name": "<%= item.title %>",
          "url": "https://art.pcoloring.com<%= item.uri %>",
          "image": "https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/page/480/<%= item._id %>.webp",
          "author": {
            "@type": "Person",
            "name": "<%= item.user.username %>"
          }
        }
      }<% if(index < data.contents.length - 1){ %>, <%}%>
    <% }); %>
    ]
  }
}
</script>

  <script type='text/javascript'
    src='https://platform-api.sharethis.com/js/sharethis.js#property=685036ce6c1ae8001abaded7&product=sop'
    async='async'></script>
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('js', new Date());

  gtag('config', 'G-JBGGVGLHTP');
</script>

<body>
  <%- include('header') %>

    <main class="container">

      <div class="breadcrumb">
        <a href="/">Home</a> &gt; <a href="/video-coloring-pages">Video Coloring Pages</a> &gt; <%= title%>
      </div>
      <section>
        <h1><%= title%></h1>
        <h4 style="margin-bottom: 40px;">By Art Number Coloring / <%=data.timeCreate%></h4>


        <div class="coloring-grid">
          <div class="video-player" id="storyVideo">
            <video poster="<%= data.poster %>" controls>
              <source src="<%= data.url %>" type="application/x-mpegURL">
              Your browser does not support the video tag.
            </video>
            <div class="play-button"></div>
          </div>
          <% data.contents.forEach(item=> { %>
            <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-desc">Click to download or color online along with the video</div>
              </div>
            </div>
          <% }); %>
        </div>

      </section>

      <%- include('comment') %>

    </main>

    <%- 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', () => {
          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>

</body>

</html>