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">
… (xem thêm)
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>
