Jump to content

Site localhost - Galeria de vídeo. Nao aparece a thumbnail e não abre em dispositivos móveis.

Cristiano Americo de Oliveira

Por Cristiano Americo de Oliveira
em PHP

 Compartilhar

Postagens Recomendadas

Cristiano Americo de Oliveira

Cristiano Americo de Oliveira

Postado
Postado

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=1920, height=1080, initial-scale=1.0">
  <title>Vídeos 360°</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    .banner {
      text-align: center;
      margin-bottom: 20px;
    }
    .banner img {
      width: 100%;
      max-width: 1920px;
      height: auto;
    }
    .titulo {
      text-align: center;
      font-size: 48px;
      color: #333;
      text-transform: uppercase;
      letter-spacing: 2px;
      margin: 30px 0;
    }
    .video-gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    .video-item {
      margin: 10px;
      flex: 0 0 calc(33.33% - 20px);
      max-width: calc(33.33% - 20px);
      position: relative;
    }
    .video-item video {
      width: 100%;
      height: auto;
      cursor: pointer;
    }
    .video-item canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
    }
  </style>
</head>
<body>
  <div class="banner">
    <img src="banner.jpg" alt="Banner do Evento">
  </div>

  <div class="titulo">Vídeos 360°</div>

  <div class="video-gallery" id="videoGallery">
    <!-- Os vídeos serão carregados aqui -->
    <?php
    $videosPath = 'C:/xampp/htdocs/videos360/videos/';
    $videos = array_diff(scandir($videosPath), array('..', '.'));

    // Loop through the videos
    foreach ($videos as $video) {
        // Check if the file is a video
        if (pathinfo($video, PATHINFO_EXTENSION) == 'mp4' || pathinfo($video, PATHINFO_EXTENSION) == 'avi' || pathinfo($video, PATHINFO_EXTENSION) == 'mov' || pathinfo($video, PATHINFO_EXTENSION) == 'wmv') {
            // Video path
            $videoPath = $videosPath . $video;

            // Thumbnail filename (same name as video, but with .jpg extension)
            $thumbnailName = pathinfo($video, PATHINFO_FILENAME) . '.jpg';

            // Full path to the thumbnail file
            $thumbnailPath = $videosPath . $thumbnailName;

            // FFmpeg command to extract a frame from the video as an image (thumbnail)
            $ffmpegCommand = "ffmpeg -i \"$videoPath\" -ss 00:00:01 -vframes 1 -vf scale=320:-1 \"$thumbnailPath\"";

            // Execute the FFmpeg command to generate the thumbnail
            exec($ffmpegCommand);

            // Display the video and its thumbnail in the gallery
            echo '<div class="video-item">';
            echo '<a href="videos/' . $video . '" target="_blank">';
            echo '<video controls>';
            echo '<source src="' . $videosPath . $video . '" type="video/' . pathinfo($video, PATHINFO_EXTENSION) . '">';
            echo 'Seu navegador não suporta o elemento de vídeo.';
            echo '</video>';
            echo '<canvas></canvas>'; // Canvas for thumbnail
            echo '</a>';
            echo '</div>';
        }
    }
    ?>
  </div>

  <script>
    window.onload = function() {
      var videos = document.querySelectorAll('.video-item video');
      
      videos.forEach(function(video) {
        var canvas = video.nextElementSibling; // Next element is the canvas

        // Capture a frame from the video and draw it on the canvas
        var ctx = canvas.getContext('2d');
        video.addEventListener('loadeddata', function() {
          canvas.width = video.videoWidth;
          canvas.height = video.videoHeight;
          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        });
      });
    };
  </script>
</body>
</html>

  • Curtir 1
Link to comment
Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora
 Compartilhar
Ir para a listagem de tópicos


×
×
  • Create New...