guoziyun
/
artsite


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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description"
    content="Watch fascinating videos and turn them into beautiful coloring pages. Each video captures moments that our artists transform into detailed coloring designs.">
  <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
  <title>Video Story Coloring Pages - Art Color</title>
  <link rel="stylesheet" href="/stylesheets/v2/styles.css">
  <style>
    :root {
      --online-color: #7b68ee;
      /* 在线填色功能专属色 */
    }

    h3 {
      color: var(--text-color);
    }

    ul {
      padding: 20px;
    }

    ul li {
      padding: 10px;
    }

    li a {
      font-size: 1.2rem;
      color: var(--secondary-color)
    }

    .page-title {
      color: var(--primary-color);
      font-size: 2.2rem;
      margin: 40px 0 20px;
      text-align: center;
    }

    .blog-content {
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      padding: 40px;
      margin-bottom: 60px;
    }

    .blog-meta {
      color: var(--light-text);
      font-size: 0.9rem;
      margin-bottom: 20px;
      text-align: center;
    }

    .blog-meta span {
      margin: 0 10px;
    }

    .blog-image {
      width: 100%;
      max-height: 400px;
      object-fit: cover;
      border-radius: 10px;
      margin-bottom: 30px;
    }

    .blog-content h2 {
      color: var(--primary-color);
      font-size: 1.7rem;
      margin: 30px 0 15px;
    }

    .blog-content p {
      margin-bottom: 20px;
      line-height: 1.7;
    }

    .blog-content ul {
      margin: 20px 0;
      padding-left: 40px;
    }

    .blog-content li {
      margin-bottom: 10px;
    }

    .content-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      margin-bottom: 10px;
    }

    /* 视频播放器样式 */
    .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;
      /* 添加内边距，使图像不贴边 */
    }

    /* 线稿图悬停效果 */
    .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-title {
      font-weight: 600;
      margin-bottom: 5px;
    }

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


    .video-play-icon {
      width: 20px !important;
      height: 20px !important;
      ;
      position: absolute;
      top: 10px;
      right: 10px;
    }

    /*弹出框样式*/
    .popup {
      display: none;
      /* 默认隐藏 */
      position: fixed;
      z-index: 11000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.3);
    }

    .popup-content-wrapper {
      box-sizing: border-box;
      height: 90vh;
      width: auto;
      aspect-ratio: 18/16;
      margin: 5vh auto;
      display: flex;
      flex-direction: row;
      justify-content: center;
      position: relative;
    }

    .popup-content-left {
      background-color: #000;
      height: 90vh;
      width: auto;
      aspect-ratio: 9/16;
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
    }

    .popup-content-right {
      box-sizing: border-box;
      padding: 20px;
      background-color: white;
      width: auto;
      height: 90vh;
      max-width: 480px;
      max-height: 90vh;
      aspect-ratio: 9/16;
      overflow: auto;
      border-top-right-radius: 8px;
      /* 卡片圆角 */
      border-bottom-right-radius: 8px;
    }

    .close {
      color: #aaa;
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
      z-index: 1000;
    }

    .close:hover,
    .close:focus {
      color: white;
      text-decoration: none;
    }

    #video-player {
      box-sizing: border-box;
      height: 100%;
      width: 100%;
    }

    /* 响应式设计, 如果是手机屏幕 */
    @media (max-width: 768px) {
      .popup-content-wrapper {
        flex-direction: column;
        width: 100%;
        height: auto;
        margin: 0 auto;
        aspect-ratio: null;
      }

      .popup-content-left {
        width: 100%;
        height: 80vh;
      }

      .popup-content-right {
        width: 100%;
        max-width: 100%;
        height: auto;
      }
    }

    .cta-box {
      background-color: var(--background-color);
      border-radius: 10px;
      padding: 30px;
      margin: 40px 0;
      text-align: center;
    }

    .cta-box h3 {
      color: var(--secondary-color);
      font-size: 1.5rem;
      margin-bottom: 15px;
    }

    .cta-btn {
      display: inline-block;
      background-color: var(--primary-color);
      color: white;
      padding: 12px 30px;
      border-radius: 30px;
      text-decoration: none;
      font-weight: 600;
      transition: all 0.3s ease;
      margin: 15px 10px 0;
    }

    .cta-btn:hover {
      background-color: var(--secondary-color);
    }

    .related-collections {
      margin-top: 60px;
    }

    .related-collections h3 {
      color: var(--secondary-color);
      font-size: 1.5rem;
      margin-bottom: 25px;
    }

    .collection-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 25px;
    }

    .collection-card {
      background-color: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      transition: transform 0.3s ease;
      text-decoration: none;
      display: block;
    }

    .collection-card:hover {
      transform: translateY(-8px);
    }

    .collection-image {
      height: 180px;
      background-color: #f0f0f0;
      overflow: hidden;
    }

    .collection-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .collection-card:hover .collection-image img {
      transform: scale(1.05);
    }

    .collection-info {
      padding: 18px;
    }

    .collection-title {
      font-weight: 700;
      font-size: 1.2rem;
      margin-bottom: 10px;
      color: var(--primary-color);
    }

    .collection-desc {
      color: var(--light-text);
      font-size: 0.9rem;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }


    @media (max-width: 768px) {
      .page-title {
        font-size: 1.8rem;
      }

      .blog-content {
        padding: 25px;
      }

      .blog-content h2 {
        font-size: 1.5rem;
      }

      .cta-box {
        padding: 25px;
      }

      .cta-box h3 {
        font-size: 1.3rem;
      }

      .collection-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
      }

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

  <% data.forEach(function(item) { %>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "VideoObject",
    "name": "<%- item.seoTitle %>",
    "description": "<%- item.seoDescription %>",
    "thumbnailUrl": "<%= item.poster %>",
    "uploadDate": "<%= new Date(item.timeCreate).toISOString() %>",
    "contentUrl": "<%= item.url %>",
    "url": "https://art.pcoloring.com/video-coloring-pages/<%= item._id %>",
    "potentialAction": {
      "@type": "WatchAction",
      "target": {
        "@type": "EntryPoint",
        "url": "https://art.pcoloring.com/video-coloring-pages/<%= item._id %>"
      }
    }
  }
  </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') %>

    <div class="container">
      <div class="breadcrumb">
        <a href="/">Home</a> &gt; <a href="/coloring-pages">Coloring Pages</a> &gt; Video Coloring Pages
      </div>

      <h1 class="page-title">Video Story Coloring Pages: Transform vibrant video moments into one-of-a-kind coloring fun
      </h1>

      <div class="blog-content">
        <img src="/assets/coloring-pages/video-coloring-pages.webp" alt="Video Story Coloring Pages" class="blog-image">
        <p>Get ready for a coloring adventure that's truly one-of-a-kind! Here at Art Color, we're excited to unveil our
          exclusive collection of Video Story Coloring Pages. Our talented designers take delightful and engaging
          snippets from everyday life, capturing those special, fun moments in short videos – and then transform them
          into unique coloring page masterpieces!</p>
        <p>Witness the inspiration behind your next coloring project! See the playful antics, the charming scenes, the
          little moments of joy that sparked these original designs. It's a fresh and exciting way to connect with the
          art and bring these lively stories to life with your own colors. Explore our growing collection of
          <strong>Video Story Coloring Pages</strong> and discover the magic of coloring inspired by real-life fun! You
          won't find anything else like it!</p>

        <div class="content-container">
          <!-- 左侧视频播放器 -->
          <div class="video-player" id="storyVideo">
            <video
              poster="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/vs-poster/320/67b2b23b9c09d12e648ea25a.webp"
              controls>
              <source
                src="https://d1tdr4l5yr56j4.cloudfront.net/%E7%8B%97%E9%AA%91%E7%94%B5%E5%8A%A8%E8%BD%A602-story.m3u8"
                type="application/x-mpegURL">
              Your browser does not support the video tag.
            </video>
            <div class="play-button"></div>
          </div>

          <!-- 右侧线稿图 -->
          <div class="lineart-container">
            <a href="/coloring-page/676be5cb86bb4d3392aac198"><img
                src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/page/640/676be5cb86bb4d3392aac198.webp"
                alt="Coloring Line Art"></a>
            <div class="lineart-overlay">
              <div class="lineart-title">Dog Riding an Electric Scooter</div>
              <div class="lineart-desc">Click to download or color online along with the video</div>
            </div>
          </div>
        </div>

      </div>

      <section>
        <h2>Video Stories</h2>
        <div class="coloring-grid">
          <% data.forEach(item=> { %>
            <div class="coloring-card">
              <div data-content-id="<%= item._id %>" class="coloring-image">
                <a href="/video-coloring-pages/<%= item._id %>" onclick="event.preventDefault(); onPlay(`<%= item.url %>`, `<%= item.jsonStr %>`)">
                  <img src="<%= item.poster %>" alt="<%= item.seoTitle %>">
                  <img src="/assets/svg/play-button.svg" class="video-play-icon" width="20px" height="20px"
                    alt="Coloring Page Video Play Button">
                </a>
              </div>
            </div>
            <% }); %>
        </div>
      </section>

      <section>
        <h2>The Heart Behind Our Video Stories: Capturing and Sharing Joy 💖</h2>
        <p>At Art Color, our <strong>Video Story Coloring Pages</strong> are born from a simple, yet profound idea: to
          <strong>discover and preserve the beautiful, fleeting moments of everyday life</strong>.
          We believe that true art lies not only in grand masterpieces but also in the small, heartwarming scenes that
          unfold around us daily. Our artists lovingly select these captivating video snippets,
          whether it's a playful pet, a stunning natural phenomenon, or a charming human interaction, and meticulously
          transform them into unique, colorable line art. It's our way of helping you pause, appreciate, and bring those
          wonderful moments to life with your own creative touch.
        <p>

        <h2>Share Your Spark! Got a Video Idea? 💡</h2>
        <p>Have you recently watched a captivating video on YouTube, TikTok, or any other social media platform that
          made you smile, wonder, or simply feel good? Do you think it would make an amazing coloring page? We'd love to
          see it!</p>
        <p>We invite you to share your favorite video clips with us. Our designers are always looking for new
          inspiration, and your suggestion might just be the next featured Video Story Coloring Page for our community!
        </p>
        <p><strong><a href="/contact">Contact us here to share your video ideas!</a></strong></p>
      </section>


      <section>
        <h2>More Free Coloring Fun</h2>
        <p>
          We hope these video story coloring pages bring you aesthetic joy! If you want more free coloring pages, feel
          free to browse the collections below.
        </p>
        <ul>
          <li><a href="/mandala-coloring-pages">Mandala Coloring Pages</a></li>
          <li><a href="/zentangle-coloring-pages">Zentangle Coloring Pages</a></li>
        </ul>
        <p>Or visit gallery to explore more coloring pages </p>
        <ul>
          <li><a href="/coloring-page-gallery">Coloring Page Gallery</a></li>
        </ul>
        <h2>Color With Us</h2>
        <p>Don’t forget to follow us on social media where we post updates about our latest coloring pages!</p>
      </section>

      <%- include('comment') %>

    </div>


    <!-- 弹出层 -->
    <div id="video-popup" class="popup">
      <div class="popup-content-wrapper">
        <span class="close" onclick="closeVideoPopup()">&times;</span>
        <div class="popup-content-left">
          <video id="video-player" controls></video>
        </div>
        <div id="video-content" class="popup-content-right">
        </div>
      </div>
    </div>


    <%- include('footer') %>
      <script src="/scripts/script.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 = 'https://d1tdr4l5yr56j4.cloudfront.net/%E7%8B%97%E9%AA%91%E7%94%B5%E5%8A%A8%E8%BD%A602-story.m3u8';
          hls.loadSource(url);
          hls.attachMedia(video);
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
          // Safari 不支持 hls.js 但原生支持 HLS
          video.src = 'https://d1tdr4l5yr56j4.cloudfront.net/%E7%8B%97%E9%AA%91%E7%94%B5%E5%8A%A8%E8%BD%A602-story.m3u8';
        } 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>

      <script>

        function onPlay(url, videoJson) {
          // alert(url);
          // return;
          console.log(url);
          console.log(videoJson);

          var video = JSON.parse(`${videoJson}`);
          generateVideoContent(video);

          var videoPopup = document.getElementById('video-popup');
          var videoPlayer = document.getElementById('video-player');

          videoPopup.style.display = 'block';

          if (Hls.isSupported()) {
            var hls = new Hls();
            hls.loadSource(url);
            hls.attachMedia(videoPlayer);
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
              videoPlayer.play();
            });
          } else if (videoPlayer.canPlayType('application/vnd.apple.mpegurl')) {
            videoPlayer.src = url;
            videoPlayer.addEventListener('canplay', function () {
              videoPlayer.play();
            });
          }

          window.closeVideoPopup = function () {
            videoPopup.style.display = 'none';
            videoPlayer.pause(); // 停止视频播放
            videoPlayer.src = ''; // 重置视频源，避免浏览器缓存问题
          };

          // 点击模态对话框外部时关闭对话框（可选，但推荐添加）
          videoPopup.addEventListener('click', function (event) {
            if (event.target === videoPopup) {
              closeVideoPopup();
            }
          });

          // 防止点击关闭按钮时事件冒泡到弹出层导致关闭（因为我们已经为关闭按钮单独绑定了事件）
          var closeButton = document.querySelector('.close');
          if (closeButton) {
            closeButton.addEventListener('click', function (event) {
              event.stopPropagation();
            });
          }
        }

        function generateVideoContent(video) {
          var div = document.getElementById('video-content');

          div.innerHTML = `
      <h3>${video.seoTitle}</h3>
    `;

          var contentHTML = '<div>';


          video.contents.forEach(item => {
            contentHTML += `
        <div class="coloring-card">
          <div data-content-id="${item._id}" class="coloring-image">
            <a href=${item.uri}><img src=${item.thumb} alt='${item.title}'></a>
          </div>
          <div class="coloring-content">
            <div class="coloring-title">${item.title}</div>
          </div>
        </div>
      `
          });

          contentHTML += '</div>';

          div.innerHTML += contentHTML;

        }

      </script>

</body>

</html>