Install node.js youtube iframe player - javascript

I'm currently trying to install the following module: https://github.com/miguelmoraleda/youtube-iframe-player
I have installed "youtube-iframe-player" via npm as well as its dependency "require-sdk", but when I try to run the following code, I always get a "ReferenceError: window is not defined" error.
var youtube = require('youtube-iframe-player');
youtube.init(function() {
console.log('API Loaded');
var youtubePlayer = youtube.createPlayer('container', {
width: '720',
height: '405',
videoId: 'M7lc1UVf-VE',
playerVars: { 'autoplay': 0, 'controls': 1 },
events: {
'onReady': playerReady,
'onStateChange': onPlayerStateChange
}
});
function playerReady(event) {
youtubePlayer.playVideo();
}
function onPlayerStateChange(event) {
console.log('Player State Changed: ', event);
}
});
How can I open the script in a webserver?
Any help would be really much appreciated!

Related

How to activate the Ctrl+F research shortcut into an Electron application?

I can't use the Ctrl+F shorcut to research some text into my Electron application...
Please see below the best part of the main.js file :
/*App*/
app.on("ready", () => {
createWindow();
});
app.on("activate", function() {
if (mainWindow === null) {
createWindow();
}
});
app.on("window-all-closed", function() {
if (process.platform !== "darwin") app.quit();
});
/*Windows*/
function createWindow() {
mainWindow = new BrowserWindow({
width: 1800,
height: 960,
minWidth: 1190,
minHeight: 540,
icon: iconPath,
frame: false,
webPreferences: {
nodeIntegration: true,
nativeWindowOpen: true,
preload: path.join(__dirname, "preload.js")
}
});
mainWindow.loadFile("dist-ng/index.html");
mainWindow.on("minimize", function(event) {
event.preventDefault();
mainWindow.hide();
});
mainWindow.on("close", function(event) {
if (!app.isQuiting) {
event.preventDefault();
mainWindow.hide();
}
return false;
});
I think there's some configuration to add to enable the Ctrl+F shorcut but I can't find it with the Electron documentation...
Please could you help me ?

navigator.app.exitApp(); is not working in cordova app (Android, Vue, Quasar Framework)

i tried exiting app on my android app.
but, it's not working.
I am using quasarframework, vue2 and javascript.
enter image description here
'yes' touch is not working.
help me. thank you.
mounted: function() {
document.addEventListener("deviceready", this.onDeviceReady, false);
},
methods: {
onDeviceReady () {
document.addEventListener("backbutton", this.onBackKey, false);
},
onBackKey() {
Dialog.create({
title: 'Exit',
message: 'exit?',
buttons: [
{
label: 'No',
handler () {
}
},
{
label: 'Yes',
handler: () => {
this.onBackKeyResult();
}
}
]
});
},
onBackKeyResult (buttonIndex) {
if (buttonIndex == 1) {
navigator.app.exitApp();
}
};
}
Evironment
quasar version : Quasar CLI v0.6.5, App running on Quasar v0.14.9
cordova -version : 8.0.0
cordova-android : 7.0.0
cordova plugin : "cordova-plugin-crosswalk-webview": "^2.4.0", "cordova-plugin-fcm": "2.1.2", "cordova-plugin-splashscreen": "^4.1.0", "cordova-plugin-whitelist": "^1.3.3"

Android device doesn't recognize file in index.html IonicFramework/Cordova

I'm trying to develop a project with IonicFramework and Cordova. Problem is that I have .js file that added as script element in index.html file of project below the line I added app.js. <script src="js/PhotoEditorSDK.min.js"></script>
This file is inside the www/js. This file is recognized by browser, iOS emulator and device and Android emulator, but not Android device. It gives this error:
Uncaught ReferenceError: PhotoEditorSDK is not defined, http://192.168.1.4:8100/js/controllers.js, Line: 297
Please help me! Any help would be appreciated, thanks.
Edit:
Here is my related part of controller.js code:
$scope.openEditor = function(){
$scope.$apply(function(){
$scope.showSettings = false;
});
var myImage = new Image();
myImage.src = imageSrc;
myImage.addEventListener('load', function () {
var container = document.getElementById('editor');
var editor = new PhotoEditorSDK.UI.ReactUI({
preferredRenderer: 'canvas',
container: container,
title: 'Pixel',
showCloseButton: true,
showNewButton: true,
maxMegaPixels: {
mobile: 20
},
export:{
showButton: true,
type: PhotoEditorSDK.RenderType.DATAURL,
download: false
},
image: myImage,
assets: {
baseUrl: 'assets/'
}
});
editor.on('close', function () {
editor.dispose();
$scope.$apply(function () {
$scope.showSettings = true;
$cordovaGoogleAds.showInterstitial();
});
});
editor.on('export', function (result) {
saveToPhotoLibrary(result);
});
});
}

Error in loading a youtube video in the popup file in chrome extenstion?

Iam developing a chrome extension which allows users to play YouTube videos in the extension. Here iam following the API guide from the You tube.
Here the manifest.js file here
{
"manifest_version": 2,
"name": "Youtube Chrome Extenstion",
"description":"Extenstion which allows users to use youtube from the chrome extenstion and also enables a search feature in the app",
"version": "1.0",
"browser_action":{
"default_icon" : "icon.png",
"default_popup" : "popup.html"
}
}
Here the popup.html code is here
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
When running the same code in the normal webpage it is working perfectly but when the same code was bundled in the form of extension ,this fails.Cant figure what the problem is?
Error here:
Your issue is the Content Security Policy. For more details see Content Security Policy Level 2.
In your manifest it is required:
"content_security_policy": "script-src https://s.ytimg.com https://*.youtube.com; object-src 'self'"
to enable the youtube video inside your popup.html.
In general, CSP works as a black/whitelisting mechanism for resources loaded or executed by your extensions. Defining a reasonable policy for your extension enables you to carefully consider the resources that your extension requires, and to ask the browser to ensure that those are the only resources your extension has access to. These policies provide security over and above the host permissions your extension requests; they're an additional layer of protection, not a replacement.
The fixed version of your extension:
// The manifest
{
"manifest_version": 2,
"name": "Youtube Chrome Extenstion",
"description":"Extenstion which allows users to use youtube from the chrome extenstion and also enables a search feature in the app",
"version": "1.0",
"browser_action":{
"default_icon" : "icon.png",
"default_popup" : "popup.html"
},
"content_security_policy": "script-src https://s.ytimg.com https://*.youtube.com; object-src 'self'"
}
// popup.html
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="popup.js"></script>
</body>
</html>
// popup.js
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}

Tinymce 4.x insert flash player directly into the editor

I can't find any examples where I can insert a video player code into the tinymce 4.x, I'have a jwplayer downloaded, but I don't know how to insert the javascript code into the editor to execute this for each added video:
jwplayer(id).setup({
file: video.href,
image: video.img,
title: video.title,
width: '640',
height: '360',
primary: 'flash',
aspectratio: '16:9'
});
please any help!
You should try initialising the player in the onLoadContent event handler of TinyMCE.
E.g.
tinyMCE.init({
...
setup : function(ed) {
ed.onLoadContent.add(function(ed, o) {
jwplayer(id).setup({
file: video.href,
image: video.img,
title: video.title,
width: '640',
height: '360',
primary: 'flash',
aspectratio: '16:9'
});
});
}
});
The pont is that you need an element in user provided content to be available for DOM manipulation before setting up the player.

Categories