This is my html Code: the video is playing but no ads are shown. Please tell me what is wrong with this code. I got this code from videojs website for streaming my videos. I am not experienced in Javascript. Please support. Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Video.js VAST Example</title>
<link href="videojs/video-js.css" rel="stylesheet">
<link href="vast/lib/videojs-contrib-ads/videojs.ads.css" rel="stylesheet" type="text/css">
<link href="vast/videojs.vast.css" rel="stylesheet" type="text/css">
<style type="text/css">
.description {
background-color:#eee;
border: 1px solid #777;
padding: 10px;
font-size: .8em;
line-height: 1.5em;
font-family: Verdana, sans-serif;
}
.example-video-container {
display: inline-block;
}
</style>
<!--[if lt IE 9]><script src="lib/es5.js"></script><![endif]-->
<script src="videojs/video.js"></script>
<script src="vast/lib/videojs-contrib-ads/videojs.ads.js"></script>
<script src="vast/lib/vast-client.js"></script>
<script src="vast/videojs.vast.js"></script>
</head>
<body>
<p class="description">Video.js VAST plugin examples.</p>
<div class="example-video-container">
<p class="description">With autoplay.</p>
<video id="vid1" class="video-js vjs-default-skin" autoplay controls preload="auto"
poster="images/nisshabdam.jpg"
data-setup='{}'
width='640'
height='400'
>
<source src="myfilm.m3u8" type="application/x-mpegURL" />
<p>Video Playback Not Supported</p>
</video>
</div>
<script>
var vid1 = videojs('vid1');
vid1.muted(true);
vid1.ads(),
vid1.vast({
url: 'https://www.videosprofitnetwork.com/watch.xml?key=1760'
});
</script>
</body>
</html>
When I go to your VAST URL:
https://www.videosprofitnetwork.com/watch.xml?key=1760
...I get a 403 HTTP error. That's probably the reason. You can ask your video ad network to get a working tag. Note that not all advertisers may want to advertise on your website, so you may not get an ad on every page view.
Related
I installed this code on a single page PHP page and it works the way I want it to. Problem is page I need to install it on is broken up into 4 PHP pages.(Home.php, which also includes, Header, Menu, and Footer PHP pages...) and I can't get the code to work. I've tried installing it different places but no luck... if anyone can help would be much appreciated... Code is below.
page to install on is: http://tonysatthejhouse.com THANKS!!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />
<link rel="stylesheet" href="http://tonysatthejhouse.com/superadmin/assets/css/Mag3.css" />
</head>
<body>
<h1>THIS IS A TEST</h1>
<script data-require="jquery#1.9.1" data-semver="1.9.1" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
<script src="http://tonysatthejhouse.com/superadmin/assets/js/MagJS4.js"></script>
</body>
</html>
$(document).ready(function() {
$.magnificPopup.open({
items: {
src: 'http://tonysatthejhouse.com/superadmin/assets/extraimages/Restaurant_Week AD-01.jpg', // can be a HTML string, jQuery object, or CSS selector
type: 'image'
}
});
})
.white-popup {
width:500px;
height:700px;
overflow:auto;
padding:10px;
background:white;
border:2px solid black;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
My media tags dont seem 2 work even thought i have the viewport tag in my head. I am trying to change the font size when lowering the resolution. I am not sure what i am doing wrong but would love some help.
<? ?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Changa One' rel='stylesheet'>
<script src="main.js"></script>
</head>
<body style="background-color: #bdc3c7">
<div class="navBar">
</div>
<div class="container">
<div class="pLbl" style="font-family: 'Changa One';">
Enter Password to enter:
</div>
<div>
<input class="pInput" id="pInp" type="password"></input>
</div>
<div>
<div class="tooltip">
<button class="pBtn" onclick="pLogin()"></button>
<span class="tooltiptext">Submit</span>
</div>
</div>
</div>
</body>
</html>
<style>
.pLbl {
font-size: 24px;
color: rgb(50,50,50);
}
#media screen and (max-width: 640px)
{
.pLbl {
font-size 12px;
}
}
</style>
It's just because you forgot the colon after font size on media query :)
PS: While modern browsers have a code correction for invalid HTML, I suggest you put style tag in your head, declare the doctype and write your inputs with self-close tag.
I'm new at Ionic. I'm try to setup a navigation bar with an icon and a text. With this code, I have both:
<style>
.title-image {
height : 30px;
width : 30px;
}
</style>
<ion-view>
<ion-nav-title>
<img class = "title-image" src='./img/soloLogo.png'><span> Aree di competenza</span>
</ion-nav-title>
</ion-view>
My problem is the icon is too up. How can I change the position only of the icon or only of the text? Because I only found how to move both, but not only 1 of them.
I'm new at Ionic, so if there is an easy solution, say it to me! :D
You can add to your CSS a vertical-align:middle;
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('onepage', {
url: '/1',
templateUrl: 'onepage.html'
})
$urlRouterProvider.otherwise("/1");
})
.title-image {
height: 30px;
width: 30px;
vertical-align: middle;
margin-top: -3px;
}
.title-text {
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive nav-title-slide-ios7" align-title="center">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view class="slide-left-right"></ion-nav-view>
<script id="onepage.html" type="text/ng-template">
<ion-view title="onepage">
<ion-nav-title>
<img class="title-image" src='./img/soloLogo.png'><span class="title-text"> Aree di competenza</span>
</ion-nav-title>
<ion-content class="padding">
<h3>Bla bla bla</h3>
<p>Bla bla bla</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
i am new to dojo and i am trying to make a button with an image, but the image does not show, besides, when one clicks the button, it correctly shows the "hi" alert.
the "zoom_in.png" image is right in the same directory with the html. And firebug shows no errors or warnings.
Update. thanks to ed, i managed to get it working via the declarative approach
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>
<script>require(["dojo/parser", "dijit/form/Button"]);</script>
<style>
.zoom_in_icon {
background-image: url('zoom_in.png');
height: 25px;
width: 25px;
text-align: center;
background-repeat: no-repeat;
}
</style>
</head>
<body class="claro">
<button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'zoom_in_icon'" type="button">
<script type="dojo/on" data-dojo-event="click" data-dojo-args="evt">
require(["dojo/dom"], function(dom){
alert( "Thank you! ");
});
</script>
</button>
<div id="result2"></div>
</body>
</html>
However, programatically, the problem persists
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Button</title>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js" data-dojo-config="async: true"></script>
<style>
.zoom_in_icon {
background-image: url('zoom_in.png');
height: 250px;
width: 250px;
text-align: center;
background-repeat: no-repeat;
}
</style>
<script>
require([
"dijit/form/Button",
"dojo/domReady!"
],
function(Button) {
new Button({
title: 'Zoom in', iconClass:'zoom_in_icon',
onClick: function() { alert("hi"); }}, "zoom_in").startup();
});
</script>
</head>
<body>
<button id="zoom_in" type="button"></button>
</body>
</html>
thanks
If you want to create the button programatically you need to call startup() on the new Button, and you don't need the data-dojo-type="dijit/form/Button" or the parse in the html, if you want to create it declaratively you don't need the new button, but you need to set the icon in the html.
See the Programatic example here:
http://dojotoolkit.org/reference-guide/1.10/dijit/form/Button.html
Hi I have a simple one as shown below that displays bordercontainer and contentpane.
I do not understand why the bordercontainer's id is registered twice since I only have one
id defined for bordercontainer.
The error stated: Error: Tried to register widget with id==main_bContainer but that id is already registered
Please advise where I got it wrong.
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../dojo1_8/dijit/themes/soria/soria.css"/>
<link rel="stylesheet" href="../common.css"/>
<style type="text/css">
html, body
{
width: 100%;
height: 100%;
margin: 5px;
padding: 0px;
overflow: hidden;
}
</style>
</head>
<body class="soria">
<div id="main_bContainer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar'">
<div class="cP_Left" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
Content Pane A
</div>
<div class="cP_Right" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
Content Pane B
</div>
</div>
</body>
<script>
var dojoConfig =
{
parseOnLoad: true,//replace web controls based on theme soria
isDebug: true,//true for debuggin with aid from FireBug, Always set it to false, to avoid overhead
async: true,//
locale : "en-us"//
};
</script>
<script src='../dojo1_8/dojo/dojo.js'></script>
<script>require(["dojo/parser",
"dojo/ready",
"dojo/request",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(parser, ready, request)
{ready(function()
{parser.parse();
});
});
</script>
</html>
Thanks
Clement
Becuase you have parse() its 2 times.
Here dojoConfig = { parseOnLoad: true };
and here parser.parse();
Just parse only one the problem will solve.