Why is it asking for progress from the script that will apply it works fine on chrome and no progress is visible on firefox
Why is it asking for progress from the script that will apply it works fine on chrome and no progress is visible on firefox <div class="ossn-videos-add-button"> … (läs mer)
Why is it asking for progress from the script that will apply it works fine on chrome and no progress is visible on firefox
<div class="ossn-videos-add-button">
<input type="file" name="ossnvideo[]" multiple class="hidden" id="add" accept="video/mp4" />
<input type="hidden" id="mytext" name="mytext">
<button type="button" id="ossn-videos-add-button-inner" class="btn btn-default"><i class="fa fa-copy"></i> <?php echo ossn_print('video:select'); ?></button>
<div class="images"><i class="fa fa-video"></i> <span class="count">0</span></div>
</div>
<input type="submit" class="ossn-hidden" id="ossn-videos-submit" />
<img id="thumbnail" />
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
0%
</div>
</div>
<script>
var input = document.getElementById('add');
var submitButton = document.getElementById('ossn-videos-submit');
var img = document.getElementById('thumbnail');
var progressBar = document.querySelector('.progress-bar');
input.addEventListener('change', function (event) {
var file = this.files[0];
var url = URL.createObjectURL(file);
if (file.type === 'video/mp4') {
createThumbnail(url, img, file);
} else {
// Unsupported file type
img.src = '';
progressBar.style.width = '0%';
progressBar.setAttribute('aria-valuenow', '0');
progressBar.textContent = '0%';
}
});
submitButton.addEventListener('click', function () {
// Create a new FormData object
var formData = new FormData();
formData.append('ossnvideo[]', input.files[0]);
formData.append('thumbnail', img.src); // Add the thumbnail to the form data
// Create a new XMLHttpRequest object
var xhr = new XMLHttpRequest();
// Set up the progress event listener
xhr.upload.addEventListener('progress', function (event) {
if (event.lengthComputable) {
var percentComplete = (event.loaded / event.total) * 100;
progressBar.style.width = percentComplete + '%';
progressBar.setAttribute('aria-valuenow', Math.round(percentComplete));
progressBar.textContent = Math.round(percentComplete) + '%';
}
});
// Set up the load event listener
xhr.addEventListener('load', function () {
if (xhr.status === 200) {
console.log('File uploaded successfully');
} else {
console.error('Error uploading file');
}
});
// Open the request and send the form data
xhr.open('POST', 'your-upload-script.php', true);
xhr.send(formData);
});
function createThumbnail(videoUrl, targetImg, file) {
var video = document.createElement('video');
video.preload = 'metadata';
video.src = videoUrl;
video.addEventListener('loadedmetadata', function () {
var canvas = document.createElement('canvas');
canvas.width = 150;
canvas.height = 280;
var context = canvas.getContext('2d');
// Set the video's current time to the middle of the video
video.currentTime = video.duration / 2;
video.addEventListener('canplaythrough', function () {
context.drawImage(video, 0, 0, canvas.width, canvas.height);
targetImg.src = canvas.toDataURL('image/png', 0.8);
document.getElementById("mytext").value = targetImg.src;
});
});
}
</script>