How to implement VAST-ad using MediaElementJS and Youtube? - javascript

I try to implement VAST-ad, but it doesn't work. My code doesn't show VAST ad before playing video
Here is my code:
var player = new MediaElementPlayer('#id', {
playsInline: true,
vastAdTagUrl: 'url',
vastEnableSkip: true,
vastSkipSeconds: 3,
features: ['vast'],
vastAdsType: 'vast',
success: function(media, node, playerElement) {
}
});
Here is links:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="mediaelement-and-player.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement-plugins/2.5.0/ads/ads.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement-plugins/2.5.0/ads/ads.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement-plugins/2.5.0/ads-vast-vpaid/ads-vast-vpaid.js"></script>
I have this error in Console:
Uncaught TypeError: Cannot set property 'mejs.ad-skip' of undefined
at Object.1 (ads.js:14)

Late Answer:
What is the exact url in your code vastAdTagUrl: 'url'?
It needs to be xml. For the sample of xml, you can go to: https://github.com/InteractiveAdvertisingBureau/VAST_Samples/blob/master/VAST%203.0%20Samples/Video_Clicks_and_click_tracking-Inline-test.xml
Also, for the features, need to have ads too:
features: ['vast','ads'],

Related

Why does a BokehJS example fail in the browser?

I'm trying to figure out if BokehJS can meet my plotting needs for a minor dev project. When I try to copy the last example found on https://docs.bokeh.org/en/latest/docs/user_guide/bokehjs.html it fails with this backtrace in Chrome:
Uncaught TypeError: Cannot read property 'classList' of null
at c (bokeh-1.3.4.min.js:31)
at Object.n.add_document_standalone (bokeh-1.3.4.min.js:31)
at Object.t.show (bokeh-api-1.3.4.min.js:31)
at bokeh.html:58
The example is copied verbatim into a file, bokeh.html, and opened directly in the browser. bokeh.html:58 is the line
Bokeh.Plotting.show(plot);
The example is supposed to be a complete standalone html file so I must be missing something obvious here. My copy of the example can be found here https://pastebin.com/VizzJbH4
Any hints are greatly appreciated.
Move script tag with code at the end instead of head tag.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Complete Example</title>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.1.1.min.js" integrity="sha384-kLr4fYcqcSpbuI95brIH3vnnYCquzzSxHPU6XGQCIkQRGJwhg0StNbj1eegrHs12" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.1.1.min.js" integrity="sha384-xIGPmVtaOm+z0BqfSOMn4lOR6ciex448GIKG4eE61LsAvmGj48XcMQZtKcE/UXZe" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.1.1.min.js" integrity="sha384-Dc9u1wF/0zApGIWoBbH77iWEHtdmkuYWG839Uzmv8y8yBLXebjO9ZnERsde5Ln/P" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.1.1.min.js" integrity="sha384-cT9JaBz7GiRXdENrJLZNSC6eMNF3nh3fa5fTF51Svp+ukxPdwcU5kGXGPBgDCa2j" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.1.1.min.js" integrity="sha384-i2RsfqLVG6PTrWCD55m8pYN9N2XZRkYVASzqjzp79o0OpPmcp+APyuwCfItW7Kn2" crossorigin="anonymous"></script>
<script>
//The order of CSS and JS imports above is important.
</script>
</head>
<body>
</body>
<script>
// create a data source to hold data
var source = new Bokeh.ColumnDataSource({
data: { x: [], y: [] }
});
// make a plot with some tools
var plot = Bokeh.Plotting.figure({
title:'Example of Random data',
tools: "pan,wheel_zoom,box_zoom,reset,save",
height: 300,
width: 300
});
// add a line with data from the source
plot.line({ field: "x" }, { field: "y" }, {
source: source,
line_width: 2
});
// show the plot, appending it to the end of the current section
Bokeh.Plotting.show(plot);
function addPoint() {
// add data --- all fields must be the same length.
source.data.x.push(Math.random())
source.data.y.push(Math.random())
// notify the DataSource of "in-place" changes
source.change.emit()
}
var addDataButton = document.createElement("Button");
addDataButton.appendChild(document.createTextNode("Add Some Data!!!"));
document.currentScript.parentElement.appendChild(addDataButton);
addDataButton.addEventListener("click", addPoint);
addPoint();
addPoint();
</script>
</html>

Javascript SweetAlert not working?

This html document
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
</head>
<script>
SweetAlert('a', 'b', 'c');
</script>
is not working. I get Uncaught ReferenceError: SweetAlert is not defined
If i use swal() instead of SweetAlert() i get
Uncaught TypeError: Cannot read property 'className' of null
The same test with sweetalert2
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.common.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.js"></script>
</head>
i get the following
Uncaught ReferenceError: module is not defined
at sweetalert2.common.min.js:1
sweetalert2.min.js:1 Uncaught TypeError: Cannot read property 'querySelector' of null
at u (sweetalert2.min.js:1)
at c (sweetalert2.min.js:1)
at U (sweetalert2.min.js:1)
at e (sweetalert2.min.js:1)
at test:8
Error A
You were calling SweetAlert(...) instead of sweetAlert(...). First letter should be in lower case.
Error B
If you are using the third argument, it should be warning, error, success or info
sweetAlert("title", "description", "error");
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
You don't need a name like sweetAlert. You can use swal('Title', 'Message', 'type') instead of sweetAlert
swal("HEY", "Message", "warning")
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
//Define.
<script src="js/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/sweetalert.css">
//For Call
function callSweetMsg(){
swal({
title: "Error!",``
text: "Here's my error message!",
type: "error",
confirmButtonText: "Cool"
});
}
Type must be in small case like warning, error, success or info.

Using CDN, how to set the correct custom plugin path?

I'm new in CKEditor, and for the first time I'm trying to make a plugin. I'm trying to create a simple button as shown here.
I'm encountering the following error:
Uncaught Error: [CKEDITOR.resourceManager.load] Resource name "timestamp" was not found at "/WEB-INF/recursos/javascript/plugins/timestamp/plugin.js?t=H0CF".
at window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.resourceManager.<anonymous> (ckeditor.js:234)
at h (ckeditor.js:230)
at Array.n (ckeditor.js:230)
at q (ckeditor.js:230)
at HTMLScriptElement.CKEDITOR.env.ie.f.$.onerror (ckeditor.js:231)
Here's my "plugin.js" code:
CKEDITOR.plugins.add('timestamp',
{
icons : 'timestamp',
init : function(editor)
{
editor.addCommand('insertTimestamp',
{
exec : function(editor)
{
var now = new Date();
editor.insertHtml('The current date and time is: <em>' + now.toString() + '</em>');
}
});
editor.ui.addButton('Timestamp',
{
label : 'Insert Timestamp',
command : 'insertTimestamp',
toolbar : 'insert'
});
}
});
And my default JavaScript code ("codigo.js"):
$(document).ready(function()
{
CKEDITOR.plugins.addExternal( 'timestamp', '/WEB-INF/recursos/javascript/plugins/timestamp/' , 'plugin.js' );
CKEDITOR.replace( 'area-paragrafo',
{
extraPlugins: 'timestamp'
});
});
I'm using Java with Tomcat (and Eclipse IDE), and my directory structures are as follow:
I already tried to set the following path:
plugins/timestamp/
But this is giving me:
Error: [CKEDITOR.resourceManager.load] Resource name "timestamp" was not found at "https://cdn.ckeditor.com/4.6.2/full-all/plugins/timestamp/plugin.js?t=H0CF".
I also tried the following path:
/plugins/timestamp/
And:
Error: [CKEDITOR.resourceManager.load] Resource name "timestamp" was not found at "/plugins/timestamp/plugin.js?t=H0CF".
My HTML page:
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<!-- JQuery. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- MY FILES -->
<link rel="stylesheet" type="text/css" media="all" th:href="#{/css/estilos.css}" />
<script th:src="#{/js/codigo.js}"></script>
<!-- CKEDITOR -->
<script src="https://cdn.ckeditor.com/4.6.2/full-all/ckeditor.js"></script>
</head>
<body>
<div class="papel-simples">
<!-- CONTENT -->
<textarea th:text="${paragrafo}" id="area-paragrafo"></textarea>
</div>
</body>
</html>
Can somebody help me, please? Thanks in advance.

CodeMirror HTML mode not working

I'm trying to style code samples with CodeMirror, but it works partially - it applies the selected theme to the textarea but the syntax is not highlighted.
There is my page:
<textarea id="template-html" name="code" class="CodeMirror">
<!DOCTYPE html>
<foobar>
<blah>Enter your xml here and press the button below to display it as highlighted by the CodeMirror XML mode</blah>
<tag2 foo="2" bar="bar" />
</foobar>
</textarea>
<link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/codemirror.css">
<link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/theme/ambiance.css">
<link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/theme/solarized.css">
<script type="text/javascript" src="/site.com/js/libs/codemirror/codemirror.js"></script>
<script type="text/javascript" src="/site.com/js/libs/codemirror/mode/javascript/javascript.js"></script>
<script type="text/javascript">
var config, editor;
config = {
lineNumbers: true,
mode: "text/html",
theme: "ambiance",
indentWithTabs: false,
readOnly: true
};
editor = CodeMirror.fromTextArea(document.getElementById("template-html"), config);
function selectTheme() {
editor.setOption("theme", "solarized dark");
}
setTimeout(selectTheme, 5000);
</script>
Here is an image of the result. It seems to work but without the syntax highlighting (image top), I've also tried without my CSS, but the result is the same (image bottom):
The problem is with mode: "text/html" which seems to be not working properly, if I use mode: "javascript" it colorizes the tags by the JavaScript syntax rules. How can I fix this?
CodeMirror parses HTML using the XML mode. To use it, the appropriate script must be included, same as with any other mode.
Add its dependency in your markup:
<script type="text/javascript"
src="/site.com/js/libs/codemirror/mode/xml/xml.js"></script>
and set the mode to xml:
config = {
mode : "xml",
// ...
};
In addition, you may want to configure the parser to allow for non well-formed XML. You can do so by switching the htmlMode flag on:
config = {
mode : "xml",
htmlMode: true,
// ...
};
See the XML/HTML mode demo for a live example.
Just in case if my experience can be helpful to someone.
I did following mistake:
<script src="lib/codemirror.js"></script>
<script type="text/javascript">
const editor = CodeMirror.fromTextArea(document.getElementById('textarea'), {
mode: "css",
lineNumbers: true,
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
lint: true
});
</script>
<script src="addons/lint/lint.js"></script>
<script src="addons/lint/css-lint.js"></script>
<script src="addons/fold/brace-fold.js"></script>
<script src="addons/fold/foldcode.js"></script>
<script src="addons/fold/foldgutter.js"></script>
<script src="addons/fold/indent-fold.js"></script>
<script src="addons/fold/markdown-fold.js"></script>
<script src="mode/css.js"></script>
<script src="//unpkg.com/csslint#1.0.5/dist/csslint.js"></script>
This is wrong: I called first codemirror.js - main file, then initialized Editor and later called its assets. In this case it didn't work and it took time for me to find the issue (I was doing it in WordPress so I just made my script depend on codemirror.js only).
<script>
window.onload = function() {
var editor = CodeMirror.fromTextArea(document.getElementById('textarea'), {
mode: "text/css",
lineNumbers: true,
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
lint: true
});
}
</script>

javascript: Getting "DOM Exception 9" while creating custom event

I'm using PhoneGap to develop an android app. in the index.html I load a js file like this:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles/style.css" />
<link rel="stylesheet" href="styles/loading.css" />
<script src="scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="scripts/cordova-2.5.0.js"></script>
<script type="text/javascript" src="scripts/readImages.js"></script>
<script type="text/javascript">
function onReadImage(event) {
//do something
}
document.addEventListener("onReadImage", onReadImage, false);
</script>
</head>
<body>
<!--
.....
-->
</body>
</html>
readImages.js
// Some codes
window.readImageEvent= document.createEvent("readImageEvent"); // line 4
readImageEvent.initEvent("onWeddingCakesRead", true, true);
//Some functions
readImageEvent.images = data;
document.dispatchEvent(readImageEvent);
but when I check LogCat, I see this error:
Uncaught Error: NOT_SUPPORTED_ERR: DOM Exception 9 at file:///android_asset/www/scripts/readImages.js: 4
Any ideas?
finally I found out the problem.
I changed the below code:
window.readImageEvent= document.createEvent("readImageEvent");
to:
window.readImageEvent= document.createEvent("Event");
Because "readImageEvent" is not a proper event type. This link could be so useful
about this issue.
According to developer.mozilla.org
The createEvent method is deprecated.
I guess, you can try something like this:
var readImageEvent = new CustomEvent(
"onReadImage",
{
detail: {
images: data
},
bubbles: true,
cancelable: true
}
);
document.dispatchEvent(readImageEvent);
More information about usage, compatibility, etc can be found HERE

Categories

Resources