フォームを提出する前に動画を表示

Question

私は自分のウェブサイトに動画をアップロードできるようにしたいので、フォームを送信する前に動画のプレビューを表示します。

私はイメージでそれをやったが、ビデオのためのスクリプトが

に動作していない

HTML：

<div class="preview"> 
 
    <a href="#" id="close-vid" class="close-button" role="button"> 
 
    <span class="glyphicon glyphicon-remove-circle"></span> 
 
    </a> 
 
\t 
 
    <video id="vid1" width="200" height="200" controls> 
 
\t \t \t <source src="#" id="vid-src" type="video/*"> 
 
\t \t \t \t \t Your browser does not support HTML5 videos 
 
\t </video> \t 
 
\t \t \t \t \t \t \t 
 
</div>

：

<label for="upload-vid1"> 
 
<span class="glyphicon glyphicon-film" role="button" ></span> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
<input type="file" id="upload-vid1" name="media-vid" 
 
class="hidden upload-vid file_multi_video" accept="video/*"> 
 
\t \t \t \t Videos 
 
\t </label>

プレビュー用のdiv

PHP：

$("#upload-vid1").on("change", function(){ 
 
    
 
    var this_ = $(this).parent(); 
 
    var dataid = $(this).attr('data-id'); 
 
    var files = !!this.files ? this.files : []; 
 

 
    if (!files.length || !window.FileReader) return; 
 
\t \t \t 
 
\t if (/^video/.test(files[0].type)){ 
 
     \t var reader = new FileReader(); 
 
\t \t reader.readAsDataURL(files[0]); 
 
\t \t reader.onloadend = function(){ 
 
\t \t \t \t \t 
 
\t \t \t var video = document.getElementById('vid-src'); 
 
\t \t \t video.src = this.result; 
 
\t \t \t $("#vid1").show(); 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t });

Answer 1

さてさて、あなたは人々に、彼らがビデオをアップロードする前に、彼らが何を選ぶかのプレビューを表示するようにします。

あなたの最近の投稿hereの投稿と、両方を一緒に実装するというあなたの要求からです。完全なコードは次のようになります。

HTML & JavaScriptのコード

(function Preview_Video() { 
 
\t 'use strict' 
 
    var URL = window.URL || window.webkitURL 
 
    
 
    
 
    var Play_Video = function (event) { 
 
    var file = this.files[0] 
 
    var type = file.type 
 
    var videoNode = document.querySelector('video') 
 
    var fileURL = URL.createObjectURL(file) 
 
    videoNode.src = fileURL 
 
    } 
 
    
 
    var inputNode = document.querySelector('input') 
 
    inputNode.addEventListener('change', Play_Video, false) 
 
})()

<div id="video"></div> 
 
<video controls autoplay></video> 
 

 
<form method="POST" enctype="multipart/form-data" name="form"> 
 
<input type="file" class=" file_multi_video" name="media-vid" accept="video/*"/> 
 
<input type="submit" name="submit" value="submit"/> 
 
</form>

PHPコード

<? 

if (isset($_POST['submit'])) { 

    if (file_exists($_FILES['media-vid']['tmp_name']) && is_uploaded_file($_FILES['media-vid']['tmp_name'])) { 

     $targetvid  = md5(time()); 
     $target_dirvid = "videos/"; 

     $target_filevid = $targetvid . basename($_FILES["media-vid"]["name"]); 

     $uploadOk = 0; 

     $videotype = pathinfo($target_filevid, PATHINFO_EXTENSION); 

//these are the valid video formats that can be uploaded and 
       //they will all be converted to .mp4 

     $video_formats = array(
      "mpeg", 
      "mp4", 
      "mov", 
      "wav", 
      "avi", 
      "dat", 
      "flv", 
      "3gp" 
     ); 

     foreach ($video_formats as $valid_video_format) { 

      if (preg_match("/$videotype/i", $valid_video_format)) { 
       $target_filevid = $targetvid . basename($_FILES["media-vid"] . ".mp4"); 
       $uploadOk  = 1; 
       break; 

      } else { 
      //if it is an image or another file format it is not accepted 
       $format_error = "Invalid Video Format!"; 
      } 

     } 

     if ($_FILES["media-vid"]["size"] > 500000000) { 
      $uploadOk = 0; 
      echo "Sorry, your file is too large."; 
     } 

     // Check if $uploadOk is set to 0 by an error 
     if ($uploadOk == 0 && isset($format_error)) { 

      echo $message; 

      // if everything is ok, try to upload file 

     } else if ($uploadOk == 0) { 


      echo "Sorry, your video was not uploaded."; 

     } 

     else { 

      $target_filevid = strtr($target_filevid, 'ÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÒÓÔÕÖÙÚÛÜÝàáâãäåçèéêëìíîïðòóôõöùúûüýÿ', 'AAAAAACEEEEIIIIOOOOOUUUUYaaaaaaceeeeiiiioooooouuuuyy'); 
      $target_filevid = preg_replace('/([^.a-z0-9]+)/i', '_', $target_filevid); 

      if (!move_uploaded_file($_FILES["media-vid"]["tmp_name"], $target_dirvid . $target_filevid)) { 

       echo "Sorry, there was an error uploading your file. Please retry."; 
      } else { 

       $vid = $target_dirvid . $target_filevid; 

      } 
     } 
    } 

} 

?> 

注：

1. あなたのPHPコードはここには載せていないので、最新の投稿から更新したものを使用しました。

2. 送信ボタンclass/idは、ここでは別のものですが、問題はありません。私はすべてを修正した。

このコードを使用すると、うまくいくでしょう。私のウェブサイト/画面から画像の

例画像：// C：\パス\ビデオ\ファイルを\に