This is the code:
var meme = "";
meme += '<div class="videoWrapper" onclick="clickVideo(this);" style="max-width: calc(100% - 2px);">';
meme += '<video loop class="video" style="max-width: 100%;">';
meme += '<source src="" type="video/mp4" id="video-preview" />';
meme += '</video>';
meme += '<div class="gif_button" style="display: flex;">GIF</div>';
meme += '</div>';
$('#previewholder_area').empty();
$('#previewholder_area').html(meme);
$('#video-preview').attr('src', URL.createObjectURL(bla.files[0]));
var videoElement = document.getElementById("video-preview");
console.log('wth');
console.log(videoElement.readyState);
videoElement.addEventListener('loadeddata', (e) => {
console.log('hello?');
if(videoElement.readyState >= 3){
readURL(bla);
}
});
videoElement.addEventListener('error', (e) => {
//Video should now be loaded but we can add a second check
makeToast("Invalid Video Format!", "error", 4000);
reset_upload();
});
Console only prints out:
wth
undefined
Whats going on here? It worked yesterday and the video still loads without a problem. I didn't make any changes since yesterday.
addEventListener
isn't doing anything, neither loadeddata nor error
After trying around this is how it works again now:
var meme = "";
meme += '<div class="videoWrapper" onclick="clickVideo(this);" style="max-width: calc(100% - 2px);">';
meme += '<video loop class="video videopreview">';
meme += '<source src="" type="video/mp4" />';
meme += '</video>';
meme += '<div class="gif_button" style="display: flex;">GIF</div>';
meme += '</div>';
$('#previewholder_area').empty();
$('#previewholder_area').html(meme);
$('.videopreview source').attr('src', URL.createObjectURL(bla.files[0]));
const videoElement = $(".videopreview");
videoElement.get(0).addEventListener('loadeddata', (e) => {
if(videoElement.get(0).readyState >= 3){
readURL(bla);
}
});
videoElement.get(0).addEventListener('error', (e) => {
makeToast("Invalid Video Format!", "error", 4000);
reset_upload();
});
I don't know why it needs to be like that now and why it worked the other way until yesterday
Related
I'm basically trying to make my buttons work for each video, the videos are generated by the loop itself, fetching the files from my server with the loop as well.
My only problem are the buttons, the videos get generated fine.
I can't seem to wrap my head around the following line, maybe there's even more than just this line I'm not doing right.
var vid[i] = document.getElementById( + [i] + "myVideo");
Am I even doing this right?
<script>
var files = <?php $out = array();
foreach (glob('../medias/aPartager/visuel/*.mp4') as $filename) {
$p = pathinfo($filename);
$out[] = $p['filename'];
}
echo json_encode($out);
?>;
var files, text, fLen, i;
fLen = files.length;
text = "";
for (i = 0; i < fLen; i++) {
text += "<a href='#video'><button onclick='playVid(" + i + ")' type='button'>Play Video</button><button onclick='pauseVid(" + i + ")' type='button'>Pause Video</button><button onclick='enableControls(" + i + ")' type='button'>Enable controls</button><button onclick='disableControls(" + i + ")' type='button'>Disable controls</button><br><video id='" + i + "myVideo' class='video' width='320' height='240' controls><source src='../medias/aPartager/visuel/" + files[i] + "' type='video/mp4'>Votre navigateur ne prend pas en charge la balise vidéo.</video></a>";
var vid[i] = document.getElementById( + [i] + "myVideo");
function playVid(i) {
vid[i].play(i);
}
function pauseVid(i) {
vid[i].pause(i);
}
function enableControls(i) {
vid[i].controls = true;
vid[i].load(i);
}
function disableControls(i) {
vid[i].controls = false;
vid[i].load(i);
}
}
text += "";
document.getElementById("lesVideos").innerHTML = text;
<script>
What it should look like
You don't put the functions for play inside the for loop. It need to be outside of the loop. Also var vid[1] is NOT valid
function playVid(id) {
let element = document.getElementById(id);
element.play();
}
function pauseVid(id) {
let element = document.getElementById(id);
element.pause();
}
<div class="video">
<button onclick="playVid('video-1')" type="button">Play Video</button>
<button onclick="pauseVid('video-1')" type="button">Pause Video</button><br>
<video id="video-1" width="320" height="176">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<div class="video">
<button onclick="playVid('video-2')" type="button">Play Video</button>
<button onclick="pauseVid('video-2')" type="button">Pause Video</button><br>
<video id="video-2" width="320" height="176">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
OR other option
let videoMap = {}
for (i = 0; i < fLen; i++) {
// Generate HTML first
// Add the video to videoMap and cache it
videoMap[i] = document.getElementById(i);
}
then AFTER the loop finishes to make it all work.
function playVid(id) {
videoList[id].play();
}
function pauseVid(id) {
videoList[id].pause();
}
I have this jsfiddle I want when the user clicks on "OK" first open browser file after user select file then continue other line. But my program before I select file go to other line. How can I do this?
popFileSelector = function() {
var el = document.getElementById("fileElem");
if (el) {
el.click();
}
};
window.popWithDelay = function() {
popFileSelector();
document.getElementById('log').innerHTML += '1!<br />';
document.getElementById('log').innerHTML += '2!<br />';
document.getElementById('log').innerHTML += '3!<br />';
document.getElementById('log').innerHTML += '4!<br />';
document.getElementById('log').innerHTML += '5!<br />';
};
<body>
<form>
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)" />
</form>
<br />
OK
<div id="log">Log: <br /></div>
</body>
This code ensures that the other lines are only printed if the input actually changes.
jsfiddle.
window.popFileSelector = function() {
var el = document.getElementById("fileElem");
if (el) {
el.click();
}
};
window.popWithDelay = function(event) {
handleFiles(event.target.files);
document.getElementById('log').innerHTML += '1!<br />';
document.getElementById('log').innerHTML += '2!<br />';
document.getElementById('log').innerHTML += '3!<br />';
document.getElementById('log').innerHTML += '4!<br />';
document.getElementById('log').innerHTML += '5!<br />';
}
window.handleFiles = function(files) {
document.getElementById('log').innerHTML += 'This is the handleFiles() function<br />';
}
<body>
<form>
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="popWithDelay(event)" />
</form>
<br />
Pop With 1 Second Delay
<div id="log">Log: <br /></div>
</body>
you can use callback function
jsfiddle
popFileSelector = function(callback) {
var el = document.getElementById("fileElem");
if (el) {
el.click();
el.addEventListener('change', callback);
}
};
window.popWithDelay = function() {
var func = function() {
document.getElementById('log').innerHTML += '1!<br />';
document.getElementById('log').innerHTML += '2!<br />';
document.getElementById('log').innerHTML += '3!<br />';
document.getElementById('log').innerHTML += '4!<br />';
document.getElementById('log').innerHTML += '5!<br />';
}
popFileSelector(func);
};
I need to load XML data to next and previous buttons on the popup box. When button click, my code is fail to load the XML data. How can I implement the code.
Here is the script
function xmlParser(xml){
xml = $(xml).children();
$(xml).children().each(function () {
let tag = $(this).prop("tagName");
let image = '<img style="background-image:url(' + $(this).find("image").text() + ')"' + '" />';
let image2 = '<div><img src="' + $(this).find("image").text() + '" width="100%" alt="' + '" />' + '</div>';
let head = '<div>' + $(this).find("head").text() + '</div>';
let html = `<div class="col-sm-4 random" id="random">
<a href="#${tag}" id="openModalBtn">
<div>${image}</div>
<h5>${head}</h5>
</a>
</div>`;
let popup = `<div id="${tag}" class="overlay">
<div class="popup">
‹
›
<h6>${head}</h6>
<a class="close" href="#">×</a>
<div>${image2}</div>
</div>
</div>`;
$("#xmldata").append(html);
$("#popup").append(popup);
});
}
Plunker
Firstly div id is being duplicated if you use directly tag name. So use index in for loop and do some simple calculation to get prev & next items, something like:
$(xml).children().each(function (idx) {
let tag = $(this).prop("tagName");
let nextIdx = idx + 1;
let prevIdx = idx - 1;
//to make cyclic rotation
nextIdx = nextIdx == total ? 0 : nextIdx;
prevIdx = prevIdx == -1 ? (total -1) : prevIdx;
//..........check plunker code
http://next.plnkr.co/edit/Sj188FthvFu6H5uv?open=lib%2Fscript.js
I'm trying to use the following code in order to split Json array into 3-columns Bootstrap rows
I'm trying that by increasing a numeric variable to 3, adding a new row div and set it back to 1.
actually, the variable return as "NaN" at the first attemt to increase it
please your help, or any other idea to splir json to 3-col rows.
the code:
<script>
$( document ).ready(function() {
var coli;
console.log( 'ready!'+coli );
$.getJSON("games.json", function(data) {
var html = '';
var coli=1;
$.each(data, function(key,value){
if (coli==3) {
html += '<div class="row">';
console.log( "3!" );
}
html += '<div class="col-md-4 img-portfolio">';
html += '<a href="portfolio-item.html">';
html += '<img class="img-responsive img-hover" src="'+value.teaser+'" alt="">';
html += '</a>';
html += '<h3>';
html += ''+value.title+'' ;
html += '</h3>';
html += '<p>'+coli+value.description+'</p>';
html += '</div> ';
if (coli==3) {
html += '</div>';
var coli=1;
console.log( "1!" );
}
coli++;
console.log( 'ready!'+coli );
});
$('#yourContainerId').html(html);
});
});
</script>
Thanks
try replace
if (coli==3) {
html += '</div>';
var coli=1;
console.log( "1!" );
}
with
if (coli==3) {
html += '</div>';
coli=1;
console.log( "1!" );
}
You are declaring your variable coli new in the if-statement. That is what you should not do.
My javascript is pulling single Flickr images randomly on each refresh. I would like to also display the image title (preferably on rollover) too. Been looking for hours on how to do this but not getting anywhere (don't really know js).
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=63338473#N03&tags=webhomeug&format=json&jsoncallback=?", displayImages);
var count = 0;
var htmlString = "<ul>";
function displayImages(data){
if(count <= 0){
var ranNum = Math.floor(Math.random()*($(data.items).size()));
var img = (data.items[ranNum].media.m).replace("_m.jpg", "_b.jpg");
var link = data.items[ranNum].link;
var title = data.items[ranNum].title;
htmlString += '<img src="' + img + '" alt="' + title + '" title="' + title + '" class=vtip"/>';
count++;
displayImages(data);
}else{
htmlString += '</ul>'
$('#images').html(htmlString);
}
}
$("selectYourPhoto").attr("title");
Thanks for pointing me in the right direction.
The suggested code wasn't working for me, but after looking into the attr method I found this works perfectly...
$("div").text($("img").attr("title"));
Thanks again!