I use VideoJs player for my website. In each video i have first ad and after that start video file. I looked on the internet but I couldn't find any clear documentation or some examples to create a button 'Skip Ad' ... I find only
this example but when i try it I have error
VIDEOJS: ERROR: TypeError: player.skipAds is not a function
here is my code:
<video id="video_1" poster="<?=$videos->getPoster(1)?>" class="video video-js vjs-default-skin" controls width="258" height="150" data-setup="{}" src="<?= $videos->getVideo(1) ?>">
<source src="<?= $videos->getVideo(1) ?>" type="video/mp4">
<div class="videojs-ads-info enabled">
<span>Your video will resume in 23 seconds</span>
<a class="enabled">Skip Ad</a>
</div>
and script :
videojs('#video_1', {}, function() {
var player = this;
player.ads();
player.on('contentchanged', function() {
player.trigger('adsready');
});
player.on('readyforpreroll', function() {
player.ads.startLinearAdMode();
player.src('<?=$videos->getAds(1)?>');
player.skipAds({ delayInSeconds: 10 });
player.one('adplaying', function() {
player.trigger('ads-ad-started');
});
player.one('adended', function() {
player.ads.endLinearAdMode();
});
});
player.trigger('adsready');
});
Try this!
<video id="video_1" poster="<?=$videos->getPoster(1)?>" class="video video-js vjs-default-skin" controls width="258" height="150" data-setup="{}" src="<?= $videos->getVideo(1) ?>">
<source src="<?= $videos->getVideo(1) ?>" type="video/mp4">
<div class="videojs-ads-info enabled">
<a class="enabled">Skip Ad</a>
</div>
</video>
player = videojs('video_1', {}, function() {
let player = this;
player.ads(); // initialize videojs-contrib-ads
player.on('readyforpreroll', function() {
player.ads.startLinearAdMode();
player.src('<?=$videos->getAds(1)?>');
player.skipAds();
player.one('adplaying', function() {
player.trigger('ads-ad-started');
});
player.one('adended', function() {
player.ads.endLinearAdMode();
});
});
player.trigger('adsready');
});
$('#video_1').on('click', '.videojs-ads-info a', function () {
$(".videojs-ads-info").css("display", "none");
});
Related
I am using Ionic 1.3.3. I want to add an action event to the slides, but the event doesn't fire at all. Nothing is appearing in the console for the following:
template:
<ion-slides options="options" slider="data.slider">
<ion-slide-page ng-repeat="profile in home.profiles">
<div class="card image">
<div id="container-{{profile.$id}}"></div>
</div>
<div class="item">
<h2>{{profile.displayName}}, {{profile.age}} (<i class="ion-heart"></i> {{profile.stars}})</h2>
</div>
</ion-slide-page>
</ion-slides>
controller:
app.controller('HomeCtrl', function (Auth, $ionicLoading, $scope, $ionicSlideBoxDelegate) {
var home = this;
$scope.options = {
loop: false,
speed: 800,
pagination: false,
};
$scope.$on('$ionicSlides.sliderInitialized', function (event, data) {
// data.slider is the instance of Swiper
console.log('initialized');
$scope.slider = data.slider;
});
$scope.$on('$ionicSlides.slideChangeStart', function (event, data) {
console.log('Slide change is beginning');
});
$scope.$on('$ionicSlides.slideChangeEnd', function (event, data) {
// note: the indexes are 0-based
console.log('Slide change ended');
$scope.activeIndex = data.slider.activeIndex;
$scope.previousIndex = data.slider.previousIndex;
});
});
I copy-pasted most of this from the ionic v1 docs. What am I missing?
How i can send data between controllers AngularJS in my occasion?
I wanna send result of scanned qr code into things[] and,of course, show it.
I'm beginner in AngularJS and JavaScript and making this program just for me
App.js:
var MKscanner = angular.module('starter', ['ionic', 'ngCordova', 'ngStorage'])
MKscanner.controller('scanBarCtrl', function($scope, $cordovaBarcodeScanner) {
$scope.input ={
MyText : ''
};
$scope.scanBarcode = function() {
$cordovaBarcodeScanner.scan(
{
preferFrontCamera : false,
orientation : 'portrait'
}).then(function (result) {
alert(result.text);
},
function (error) {
alert('Scanning failed: ' + error);
});
};
});
MKscanner.factory ('StorageService', function ($localStorage) {
$localStorage = $localStorage.$default({
things: []
});
var _getAll = function () {
return $localStorage.things;
};
var _add = function (thing) {
$localStorage.things.push(thing);
}
var _remove = function (thing) {
$localStorage.things.splice($localStorage.things.indexOf(thing), 1);
}
return {
getAll: _getAll,
add: _add,
remove: _remove
};
});
MKscanner.controller( 'MainCtrl', function ($scope, StorageService) {
$scope.things = StorageService.getAll();
$scope.add = function (newThing) {
StorageService.add(newThing);
};
$scope.remove = function (thing) {
StorageService.remove(thing);
};
});
<div ng-controller="MainCtrl">
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="Save your own text" ng-model="newThing">
</label>
<button class="button button-clear button-positive icon" ng-click="add(newThing)">
<i class="ion-ios-plus-outline"></i> Add
</button>
</div>
</div>
<ion-list show-delete="false" can-swipe="true">
<ion-item ng-repeat="thing in things">
{{thing}}
<ion-option-button class="button-assertive ion-trash-b" ng-click="remove(thing)"></ion-option-button>
</ion-item>
</ion-list>
</div>
You can share data between controllers using $emit and $broadcast :
These events can be used to send data as well, The classic example is given below. You can share data any controller in the app.
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="sendData();"></button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
function sendData($scope) {
var arrayData = [1,2,3];
$scope.$emit('someEvent', arrayData);
}
});
app.controller('yourCtrl', function($scope, $http) {
$scope.$on('someEvent', function(event, data) {
console.log(data);
});
});
</script>
I am super new to React and quite new to Meteor.
I am doing a Meteor.call to a function ('getTheThing'). That function is fetching some information and returns the information as a response. In my browser I can see that the method is returning the correct information (a string), but how do I get that response into the DOM?
(As you can see, I have tried to place it in the DOM with the use of ReactDOM.findDOMNode(this.refs.result).html(response);, but then I get this error in my console: Exception in delivering result of invoking 'getTheThing': TypeError: Cannot read property 'result' of undefined)
App = React.createClass({
findTheThing(event) {
event.preventDefault();
var username = ReactDOM.findDOMNode(this.refs.textInput).value.trim();
Meteor.call("getTheThing", username, function(error, response){
console.log(response);
ReactDOM.findDOMNode(this.refs.result).html(response);
});
ReactDOM.findDOMNode(this.refs.textInput).value = "";
},
render(){
return(
<div className="row">
<div className="col-xs-12">
<div className="landing-container">
<form className="username" onSubmit={this.findTheThing} >
<input
type="text"
ref="textInput"
placeholder="what's your username?"
/>
</form>
</div>
<div ref="result">
</div>
</div>
</div>
);
}
});
this is under the different context, thus does not contain the refs there. Also, you cannot set html for the Dom Element. You need to change into Jquery element
var _this = this;
Meteor.call("getTheThing", username, function(error, response){
console.log(response);
$(ReactDOM.findDOMNode(_this.refs.result)).html(response);
});
Though i recommend you to set the response into the state and let the component re-rendered
For a complete React way
App = React.createClass({
getInitialState() {
return { result: "" };
},
shouldComponentUpdate (nextProps: any, nextState: any): boolean {
return (nextState['result'] !== this.state['result']);
},
findTheThing(event) {
event.preventDefault();
var username = ReactDOM.findDOMNode(this.refs.textInput).value.trim();
Meteor.call("getTheThing", username, function(error, response){
console.log(response);
_this.setState({ result: response });
});
ReactDOM.findDOMNode(this.refs.textInput).value = "";
},
render(){
return(
<div className="row">
<div className="col-xs-12">
<div className="landing-container">
<form className="username" onSubmit={this.findTheThing} >
<input
type="text"
ref="textInput"
placeholder="what's your username?"
/>
</form>
</div>
<div ref="result">{this.state['result']}</div>
</div>
</div>
</div>
);
}
});
I'm going mad with a simple embedded of social buttons.
Put it in this way I've got two states home and blog
with this code
home
<div id="socials-bar" class=" clearfix">
<ul class="pull-right">
<li>
<div class="fb-like" data-href="http://mydomain.com" data-layout="standard" data-action="like" data-show-faces="false" data-share="true"></div>
</li>
<li>
Tweet
</li>
<li>
<div class="g-plusone" data-size="small" data-annotation="inline" data-width="120" data-href="http://mydomain.it"></div>
</li>
</ul>
</div>
//other html
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
<script>
window.___gcfg = {lang: 'it'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
blog
<div class="clearfix">
<ul class="article-socials pull-right">
<li>
<div class="fb-like" data-href="http://mydomain.it/blog/{{article.id}}/{{article.slug}}" data-layout="standard" data-action="like" data-show-faces="false" data-share="true"></div>
</li>
<li>
Tweet
</li>
<li>
<div class="g-plusone" data-size="small" data-annotation="inline" data-width="120" data-href="http://mydomain.it/blog/{{article.id}}/{{article.slug}}"></div>
</li>
</ul>
</div>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
<script>
window.___gcfg = {lang: 'it'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
The problem is that the I see them only in the home
page if I get rid off of them in home I can see them in the blog state
Do you know what could be the problem ?
UPDATE: I've updated the below directives and registered them on bower with the package name 'angulike', for full details and a working demo go to http://jasonwatmore.com/post/2014/08/01/AngularJS-directives-for-social-sharing-buttons-Facebook-Like-GooglePlus-Twitter-and-Pinterest.aspx
The problem is that the social buttons only get initialized on page load by default, so in an angularjs app you need to re-initialize the buttons yourself when the view changes. I got them working by creating a directive for each, below is the code:
Google Plus Button Directive
app.directive('googlePlus', ['$window', function ($window) {
return {
restrict: 'A',
template: '<div class="g-plusone" data-size="medium"></div>',
link: function (scope, element, attrs) {
scope.$watch(function () { return !!$window.gapi; },
function (gapiIsReady) {
if (gapiIsReady) {
$window.gapi.plusone.go(element.parent()[0]);
}
});
}
};
}]);
Tweet Button Directive
app.directive('tweet', ['$window', function ($window) {
return {
restrict: 'A',
template: 'Tweet',
link: function (scope, element, attrs) {
scope.$watch(function () { return !!$window.twttr; },
function (twttrIsReady) {
if (twttrIsReady) {
$window.twttr.widgets.load(element.parent()[0]);
}
});
}
};
}]);
Facebook Like Button Directive
app.directive('fbLike', ['$window', function ($window) {
return {
restrict: 'A',
template: '<div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>',
link: function (scope, element, attrs) {
scope.$watch(function () { return !!$window.FB; },
function (fbIsReady) {
if (fbIsReady) {
$window.FB.XFBML.parse(element.parent()[0]);
}
});
}
};
}]);
HTML to use the directives
<div data-fb-like=""></div>
<div data-tweet=""></div>
<div data-google-plus=""></div>
If I understand, probably you should remove the script in blog state template.
Anyway, I can share how I do in my sample project:
index.html
directive for social buttons
template for
social buttons
basically in index there are scripts for social buttons available for all states
I have images that are loaded from database. When I click on an image, I want to show that image in a Modal Pop-up. My problem is that, I am not able to call the partial view from jquery. In fact, that action is not getting called from JQuery. Please help... I am a fresher. Below is my code:
_Layout.cshtml
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>_Layout</title>
#Styles.Render("~/bundle/ProfileStyle")
#Scripts.Render("~/bundle/JQuery")
#Scripts.Render("~/bundle/JQueryUI")
#Scripts.Render("~/bundle/CustomJS")
</head>
<body>
<div>
#RenderBody()
</div>
<div id="dialog">
#Html.Partial("_ProfileDetail")
</div>
</body>
</html>
Index.cshtml
#model IEnumerable<Profile.Models.TestProfile>
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<div class="tableOuterBlock">
#foreach (var item in Model)
{
<div class="tableInnerBlock">
<span>
#*<a href="#Url.Action("Edit", "Profile", new {#item.upi_Id})">*#
<img id="imgOpenDialog" src="#Url.Content(#item.upi_ImgData)" alt="No Image" width="100" height="100" />
#*</a>*#
</span>
</div>
}
</div>
Partial view
#model Profile.Models.TestProfile
<div>
#if(Model != null)
{
<img id="imgOpenDialog" src="#Url.Content(#Model.upi_ImgData)" alt="No Image" width="80%" height="50%" />
}
</div>
JQuery
$(function () {
$("[id*=imgOpenDialog]").click(function () {
var imgDetail = $(this).prop("src");
$("#dialog").dialog({
autoOpen: true,
position: { my: "center" },
modal: true,
resizable: false,
open: function () {
//parameter to c# function
data: { strImg = imgDetail }
$(this).load('#Url.Action("ShowProfileDetail","Profile")');
}
});
});
});
Controller
public PartialViewResult ShowProfileDetail(string strImg)
{
strImg = strImg.Substring(strImg.IndexOf('/'));
List<TestProfile> tpList = db.TestProfiles.Where(x => x.upi_ImgData ==strImg).ToList();
TestProfile testProfile = db.TestProfiles.Find(tpList[0].upi_Id);
return PartialView("_ProfileDetail", testProfile);
}
it may be a bit late but if you check out this blog, and download his code, you will see his use of jquery to create a modal pop up from a partial view.