Здравствуй
Я хочу разрешить пользователям поднимать видео на моем сайте, и я хочу показать предварительный просмотр видео до отправки формы.
Я сделал это с изображениями, но сценарий для видео не работает
HTML:
<label for="upload-vid1"> <span class="glyphicon glyphicon-film" role="button" ></span> <input type="file" id="upload-vid1" name="media-vid" class="hidden upload-vid file_multi_video" accept="video/*"> Videos </label> Div для предварительного просмотра:
<div class="preview"> <a href="#" id="close-vid" class="close-button" role="button"> <span class="glyphicon glyphicon-remove-circle"></span> </a> <video id="vid1" width="200" height="200" controls> <source src="#" id="vid-src" type="video/*"> Your browser does not support HTML5 videos </video> </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; if (/^video/.test( files[0].type)){ var reader = new FileReader(); reader.readAsDataURL(files[0]); reader.onloadend = function(){ var video = document.getElementById('vid-src'); video.src = this.result; $("#vid1").show(); } } });
Пожалуйста помоги.
Хорошо, поэтому вы хотите показать людям предварительный просмотр того, что они выбирают, прежде чем загружать видео.
Из-за вашего недавнего сообщения здесь и из вашего запроса об осуществлении обоих вместе. Полный код будет выглядеть следующим образом.
Код HTML и JavaScript
(function Preview_Video() { '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>