在提交表單前顯示視頻

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. 提交按鈕類/ id這裏不同於另一個，但它不是一個問題。我修好了一切。

只要使用此代碼，你會很好。從我的網站/屏幕上的圖像的

示例圖片：