Jump to content

Como resolver problema de Thumbnails e reprodução de vídeos em dispositivos móveis no localhost?

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
  • 6 months later...
frankhosaka

frankhosaka

Postado
Postado

Trabalhar com arquivos não é fácil, eu costumo trabalhar com pequenos programas para ver se eu não fiz erro de digitação: 

<?php
// $arquivos=scandir("c:/xampp/videos360/videos/"); // o sistema não pode encontrar
$arquivos=scandir("c:/wamp64/www/astudy/");
var_dump($arquivos); // [0=>'.',1=>'..',2=>'index.php',3=>'video.mp4'];

Se você não quiser fazer pequenos testes, você pode incluir o comando var_dump( ); exit; em pontos estratégicos para conferir se o PHP consegue "enxergar" o que você espera naquele ponto.

  • Curtir 1
Link to comment
Compartilhe em outros sites
  • Casa do Desenvolvedor mudou o título para Como resolver problema de Thumbnails e reprodução de vídeos em dispositivos móveis no localhost?

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