其实是有办法的。
方法:用户选择要上传的视频。选择后,在弹出的 div 中显示加载消息或仅使用警告框。然后,您要做的就是将该视频文件加载到视频标签中。最好显示视频标签:无。在视频标签处于就绪状态后,跳到视频的 50%。然后,获取视频标签的屏幕截图。您可以将图像作为 base64 格式,然后通过 Ajax 将其与视频一起发送到 PHP。
(Méthode : Un utilisateur sélectionne la vidéo à téléverser. Après de sélectionner, montrez un message de chargement dans une fenêtre ou utiliser une boîte d'alerte. Puis,charger la vidéo à un élément de vidéo. C'est mieux si l'élément est sur display: none. Avant que la vidéo soit dans un état-prêt, passez la vidéo à 50 %. Puis, prenez une capture d'écran d'élément vidéo. On peut obtenir l'image dans base64 et alors envoyez-la à PHP avec Ajax。)
为 base64 脚本添加一个输入标签。
(Incluez un élément d'entrée pour le script base64.)
<html>
<form action="" method="post" enctype="multipart/form-data" id="uploadvidform" accept="video/*">
<input type="file" name="file" id="file" />
<input type="text" name="screenshotbase64" id="screenshotbase64" value="" style="display: none;" />
</form>
<input type="button" value="Upload" id="uploadvidbut" />
还有不可见的视频元素。
(Et l'élément de vidéo invisible.)
<video width="400" id="videoelem" style="display: none;" controls>
<source src="" id="video_src">
Your browser does not support HTML5 video.
</video>
还有剧本。首先,在文件被选中时进行操作。确保在 head 元素中链接了 Google Ajax 文件。
(D'abord, faites une action pour lorsqu'on sélecionne le fichier.Assurez-vous d'avoir lié le fichier de Google Ajax dans l'élément tête.)
<script>
var scalefac = 0.25;
// Scale of image;
// Echelle de l'image;
var screenshots = [];
// An array for multiple screenshots;
// Un tableau pour plusieurs captures d'écran;
// This function will create an image. It's not used now, it's used in the below action (when you change the file).
// Cette fonctionne créera une image. C'est pas pour maintenant c'est pour la fonctionne suivante (lorsqu'on change le fichier).
function capture(video, scalefac) {
if(scaleFactor == null){
scaleFactor = 1;
}
var w = video.videoWidth * scalefac;
var h = video.videoHeight * scalefac;
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, w, h);
return canvas;
}
$(document).ready(function(){
$(document).on("change", "#file", function(){
alert("Please wait while we verify your video. This will only take a couple of seconds.");
// The next 3 lines will load the video
// Les 3 lignes suivantes chargeront la vidéo
var lasource = $('#video_src');
lasource[0].src = URL.createObjectURL($('#file').prop("files")[0]);
lasource.parent()[0].load();
var video = document.getElementById("videoelem");
setTimeout(function(){
// Video needs to load then we check the state.
// Il faut que la vidéo charge puis nous vérifier l'état.
if (video.readyState == "4"){
var videoduration = $("#videoelem").get(0).duration;
var timetogoto = videodurationinseconds / 2;
$("#videoelem").get(0).currentTime = timetogoto;
setTimeout(function(){
// Video needs to load again
// Il faut que la vidéo charge de nouveau
var video = document.getElementById("videoelem");
// function the screen grab.
// fonctionne la capture d'écan.
var canvas = capture(video, scalefac);
screenshots.unshift(canvas);
for(var i=0; i<4; i++){
$("#screenshotbase64").val(screenshots[i].toDataURL());
}
}, 500);
}, 3000);
});
// Now that the form is filled, you can send your data to your PHP file.
// Maintenant que le formulaire est rempli vous pouvez envoyer les données à votre fichier de PHP.
$(document).on('click', '#uploadvidbut', function(){
var form = new FormData($("#uploadvidform")[0]);
$.ajax({
url: '/uploadvideodocument.php', // PHP file - Fichier de PHP
type: 'POST',
data: form,
cache: false,
contentType: false,
processData: false,
success: function (result){
if (result == 1){
alert("The video has been uploaded.");
}
}
}).fail(function(){
alert("Oh no, the video wasn't uploaded.");
});
});
});
</script>
现在是 PHP 文件。我只会将 base64 转换为图像,我希望你知道如何做剩下的。
(Et maintenant le fichier PHP. Je vais seulement inclure la conversion base64 dans une image, j'espère que vous savez comment faire le reste.)
<?php
$data = $_POST['screenshotbase64'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
// The following 2 lines will create the time in microseconds which you can use as the name. Microseconds ensures an almost impossibility of two people uploading at the same time.
// Les 2 lignes suivantes créeront les temps dans microseconds, vous pouvez l'utiliser en tant que le nom. Utiliser les microseconds garantira une presque impossibilité de noms en double.
$mt = explode(' ', microtime());
$millies = ((int)$mt[1]) * 1000 + ((int)round($mt[0] * 1000));
$screenshotfilename = time(). $millies . '.png';
// In the next line, replace YOUR DIRECTORY with your home path and then include the folder of where you want to save the screenshot.
// Dans la ligne suivante, remplacez YOUR DIRECTORY par votre chemin d'accès, puis incluez le dossier dans lequel vous souhaitez sauvegarder la capture.
file_put_contents('YOUR DIRECTORY AND FOLDER' . $screenshotfilename, $data);
// Now, the screen shot has been saved to the server and the name of the file is $screenshotfilename.
// Maintenant la capure d'écran a été sauvegardée à votre serveur et le nom du fichier est $screenshotfilename.
?>
请注意:
某些浏览器可能不接受视频元素。如今,它几乎从未发生过。但请记住这一点。
Veuillez 技艺:
某些navigationurs peuvent ne pas accepter l'élément vidéo。 Mais de nos jours cela n'arrive presque jamais。