Develop Reference

Play and Pause all embedded videos button doesn’t function after a refresh

I've created a website that allows users to display multiple YouTube videos, and I'm trying to buttons that pause and play every video by using JS.
The website functions correctly until the page is refreshed. Once the page is refreshed, the display button outputs empty divs rather than a video until the 3rd attempt. Meanwhile, the play and pause buttons only work after the display button is clicked.
$(document).ready(function() {
let input = document.getElementById("video-url");
let displayButton = document.getElementById("display-video");
let containerDiv = document.getElementById("video-container");
let stateList = [];
let player;
let players = [];
// Load the YT library
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
displayButton.addEventListener("click", function() {
let videoID = input.value.split("watch?v=")[1];
let innerDiv = document.createElement("div");
innerDiv.className = "inner";
innerDiv.id = "video-" + players.length;
let outerDiv = document.createElement("div");
outerDiv.className = "window draggable resizable";
outerDiv.style.transform = "translate3d(100px, 100px, 0)";
outerDiv.appendChild(innerDiv);
init();
containerDiv.appendChild(outerDiv);
player = new YT.Player("video-" + players.length, {
height: "100%",
width: "100%",
videoId: videoID,
events: {
'onReady': onPlayerReady
}
});
players.push(player);
init();
saveState();
});
function onPlayerReady(event) {
let playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
event.target.playVideo();
});
let pauseButton = document.getElementById("pause-button");
pauseButton.addEventListener("click", function() {
event.target.pauseVideo();
});
let stopButton = document.getElementById("stop-button");
stopButton.addEventListener("click", function() {
event.target.stopVideo();
});
}
function init() {
// the ui-resizable-handles are added here
$('.resizable').resizable();
// makes GSAP Draggable avoid clicks on the resize handles
$('.ui-resizable-handle').attr('data-clickable', true);
// make the element draggable
Draggable.create('.draggable', {
onPress: function () {
$(this.target).addClass('ui-resizable-resizing');
},
onRelease: function() {
$(this.target).removeClass('ui-resizable-resizing');
saveState();
}
});
$('.resizable').dblclick(function () {
var win = $(this);
toggleSize(win);
saveState();
});
}
function createHandleBar() {
// create handlebar
let handleBar = document.createElement('div');
handleBar.className = 'handleBar';
$(handleBar).css({
position: 'absolute',
top: '0px',
width: '100%', height: '43px',
padding: '4px',
boxSizing: 'border-box'
});
saveState();
return handleBar;
}
function saveState() {
let state = {
id: stateList.length,
state: containerDiv.innerHTML
};
stateList.push(state);
window.localStorage.setItem('videoState', JSON.stringify(stateList));
window.history.pushState({}, '', '#' + btoa(JSON.stringify(stateList)));
}
if (window.location.hash) {
let stateListFromStorage = JSON.parse(atob(window.location.hash.substring(1)));
let stateToRestore = stateListFromStorage[stateListFromStorage.length - 1];
containerDiv.innerHTML = stateToRestore.state;
init();
}
});
GitHub Code: https://github.com/RyanOliverV/Video_Viewer
Page: https://ryanoliverv.github.io/Video_Viewer/

How to call function on keyup - Javascript

I am triying to create mathjax output to png file
I have created a JSFiddle here
I used code like below, I have an html code like
function myFunction(eqn){
window.MathJax = {
jax: ["input/TeX", "output/SVG"],
extensions: ["tex2jax.js", "MathMenu.js", "MathZoom.js"],
showMathMenu: false,
showProcessingMessages: false,
messageStyle: "none",
SVG: {
useGlobalCache: false
},
TeX: {
extensions: ["AMSmath.js", "AMSsymbols.js", "autoload-all.js"]
},
AuthorInit: function() {
MathJax.Hub.Register.StartupHook("End", function() {
var mj2img = function(texstring, callback) {
var input = texstring;
var wrapper = document.createElement("div");
wrapper.innerHTML = input;
var output = { svg: "", img: ""};
MathJax.Hub.Queue(["Typeset", MathJax.Hub, wrapper]);
MathJax.Hub.Queue(function() {
var mjOut = wrapper.getElementsByTagName("svg")[0];
mjOut.setAttribute("xmlns", "http://www.w3.org/2000/svg");
// thanks, https://spin.atomicobject.com/2014/01/21/convert-svg-to-png/
output.svg = mjOut.outerHTML;
var image = new Image();
image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(output.svg)));
image.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
output.img = canvas.toDataURL('image/png');
callback(output);
};
});
}
mj2img(eqn, function(output){
const t = document.getElementById("target"); const i = document.createElement('img'); i.src = output.img; t.append(i);
});
});
}
};
}
(function(d, script) {
script = d.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.onload = function() {
// remote script has loaded
};
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js';
d.getElementsByTagName('head')[0].appendChild(script);
}(document));
<textarea onkeyup="myFunction(this.value)"></textarea>
<div id="target"></div>
How to display image when keyup a form containing textarea?
Here is a working version of above code by giving direct value.

standard pattern for keyup Event listener
document.getElementById("target").onkeyup = function() {funName()};
According to your specific problem. I'm not pretty sure where do you want to apply it

Video Js is not defined when call in external js file

(function () {
// Creating and Appending scripts dynamically
function createScript(src) {
var script = document.createElement('script');
script.src = src;
document.getElementsByTagName('head')[0].appendChild(script);
}
// End script tags Here
function createLink(href) {
var link = document.createElement('link');
link.href = href;
link.rel = "stylesheet";
link.type = "type/css";
document.getElementsByTagName('head')[0].appendChild(link);
}
createLink('http://vjs.zencdn.net/4.12/video-js.css');
createScript('http://vjs.zencdn.net/4.12/video.js');
createLink('http://localhost/projects/test/bin/videojs.vast.vpaid.min.css');
createScript('http://localhost/projects/test/bin/videojs_4.vast.vpaid.min.js');
createScript('http://localhost/projects/test/bin/es5-shim.js');
createScript('http://localhost/projects/test/bin/ie8fix.js');
// DIV 2
// Div to hold the video
var divContainer = document.createElement('div');
divContainer.class = 'example-video-container';
divContainer.style.display = 'inline-block';
document.getElementById("video3438445[CB]").appendChild(divContainer);
// End parent Div here (parent of video div/tag)
// Video Player Below
// Create the video tag for html video player
var video = document.createElement('video');
video.id = 'video';
/*video.width = 300;
video.height = 250;*/
video.className = 'video-js vjs-default-skin';
video.autoplay = true;
video.controls = true;
video.muted = true;
video.preload = 'auto';
video.poster = "http://vjs.zencdn.net/v/oceans.png";
//video.data-setup = '{}';
// Function to create sources for video
function addSourceToVideo(element, src, type) {
var source = document.createElement('source');
source.src = src;
source.type = type;
element.appendChild(source);
}
addSourceToVideo(video, 'http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4', 'video/mp4');
addSourceToVideo(video, 'http://video-js.zencoder.com/oceans-clip.mp4', 'video/webm');
addSourceToVideo(video, 'http://video-js.zencoder.com/oceans-clip.mp4', 'video/ogg');
var paragraph = document.createElement('p');
paragraph.innerHTML = "Video PlayBack Not Supported";
video.appendChild(paragraph);
video.load();
//video.play();
divContainer.appendChild(video);
// Video player creation ends here
var vt = 'Vast_tag_url';
var vpaidPath = 'http://localhost/projects/test/bin/VPAIDFlash.swf';
setTimeout(myFunction, 1000);
function myFunction() {
var player = videojs(
"video", {
plugins: {
"vastClient": {
"adTagUrl": vt,
"adCancelTimeout": 15000,
"adsEnabled": true,
"playAdAlways": true,
"vpaidFlashLoaderPath": vpaidPath
}
}
})
}
})();
It works on normal HTML page when we have CSS and JS in head then a div with video and JS functions in body. But when I created a JS file and included it by javascript then it is not working.
Please suggest me what I am doing wrong.

Thanks so much for your response. My issue has been resolved. I used following code for this.
function loadScriptSync(src) {
var s = document.createElement('script');
s.src = src;
s.type = "text/javascript";
s.async = false; // <-- this is important
document.getElementsByTagName('head')[0].appendChild(s);
}
It will load js files synchronously.

The way you are loading the scripts is asynchronously.
You could either load them in the head directly, or implement a method that will listen to the loading events. Example below written in ES6.
function loadScript(src) {
return new Promise((onFulfilled, onRejected) => {
const script = document.createElement('script');
let loaded;
// set source path to load
script.setAttribute('src', src);
script.onreadystatechange = script.onload = () => {
if (!loaded) {
onFulfilled(script);
}
loaded = true;
};
script.onerror = function() {
// something went wrong
};
// append the given script
document.getElementsByTagName('head')[0].appendChild(script);
});
}
loadScript('http://url').then(() => {
// do something now that the script is loaded.
});
Now you will be sure that when the promise is fulfilled, the script is loaded successfully.

Custom Search Element V1 doesn't work: how can i change to V2?

Before Custom Search Element V1 google worked but now when i try to search something on my website notice me that:
Unauthorized access to internal API. Please refer to https://support.google.com/customsearch/answer/4542055
I think the problem is that there's an new Api version...
The code V1 was this:
google.setOnLoadCallback(googlata);
google.load('search', '1');
function googlata(){
var customSearchControl = new google.search.CustomSearchControl('ID CSE');
customSearchControl.setResultSetSize(20);
customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF);
var options = new google.search.DrawOptions();
options.setAutoComplete(true);
options.enableSearchResultsOnly();
customSearchControl.draw('cse',options); // 'cse' is a div for serp results
customSearchControl.execute('keyword');
In head this resource and then in body the div for results:
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<div id="cse"></div>
Now how can i change to V2 ?
Could work this code ?
function gcseCallback() {
if (document.readyState != 'complete')
return google.setOnLoadCallback(gcseCallback, true);
google.search.cse.element.render({
div:'cse',
tag:'searchresults-only',
attributes:{
resultSetSize: 20,
noResultsString: "<div style='padding:10px'>Nothing</div>"
}
});
var element = google.search.cse.element.getElement('gsearch');
element.execute('keyword');
};
window.__gcse = {
parsetags: 'explicit',
callback: gcseCallback
};
(function() {
var cx = 'ID CSE';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
and only
<div id="cse"></div>
I hope you can help me and sorry for my english

Vimeo default to html5 embed

Hi there I am trying to have a video autoplay and mute. But on mobile devices it doesn't show due to flash.
here is my code.
<div id="vimeo"> </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
function vimeo_player_loaded() {
moogaloop3 = document.getElementById('vimeo');
moogaloop3.api_setVolume(0);
}
var flashvars = {
'clip_id': '138036294', // <--vimeo video ID
'server': 'vimeo.com',
'show_title': 0,
'show_byline': 0,
'show_portrait': 0,
'fullscreen': 0,
'autoplay': 1,
'js_api': 1,
'js_onload': 'vimeo_player_loaded'
}
var parObj = {
'swliveconnect':true,
'fullscreen': 1,
'allowscriptaccess': 'always',
'allowfullscreen':true
};
var attObj = {}
attObj.id="vimeo";
swfobject.embedSWF("http://www.vimeo.com/moogaloop.swf", "vimeo", "343", "193", "9.0.28", '',flashvars,parObj, attObj );
</script>
How would I go about making it default to html5?

Found another way of doing it using
<div id="vimeo"> <div>
<script>
// URL of the video
var videoUrl = 'http://www.vimeo.com/76979871';
var endpoint = 'http://www.vimeo.com/api/oembed.json';
var callback = 'embedVideo';
var url = endpoint + '?url=' + encodeURIComponent(videoUrl)+ '&autoplay=true' + '&callback=' + callback + '&width=420';
function embedVideo(video) {
document.getElementById('vimeo').innerHTML = unescape(video.html);
}
function init() {
var js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', url);
document.getElementsByTagName('head').item(0).appendChild(js);
}
window.onload = init;