I have a video.js player working with in-roll pre-roll ads before the actual video starts. but i am unable to get rid of seek bar in the ad
I have used VAST pluging to get this thing working.the java script option passed to vast.js are below
Ad video with Seek bar
<script type="text/javascript">
var options = {
ads: {
'skipAd': {
'enabled': true,
'timeOut': 10,
},
'servers' : [
{
'apiAddress': '../static/vast.xml'
//'apiAddress' : 'http://some.domain/xdr-redirect/?http://some.domain/xml/vast.xml', //for xdr only
//'xdrMethod': 'yql' //['yql' | 'xdr']
}
],
'schedule' : [
{
'position' : 'pre-roll',
'startTime': '00:00:00'
},
{
'position' : 'mid-roll',
'startTime': '00:00:07'
},
{
'position' : 'post-roll'
}
],
}
};
_V_("video", options);
is there an option that can be passed to vast.js or add some code to disable the seek bar.
thanx in advance for the answers..
thank you
VideoJS let you register event callback.
You can register a function to vast.adStart and vast.adEnd to set the bar display: none or block, whatever fit's your usecase.
player.on('vast.adStart', function () {
document.querySelector('.vjs-progress-control').style.display = "none";
});
Related
I am having problems with ST2.3. I've upgraded from 2.1 and I've had several regressions which are now working ok. However one problem that definitely seems to be broken is the Map wrapper around the google api. My app works fine in Testing and Development modes, but as soon as it is built for production the map stops working.
The code where it seems to break on is here within the Map code on the setMapCenter function.
setMapCenter:function(e){var b=this,d=b.getMap(),a=b.getMapOptions(),c=(window.google||{}).maps;if(c){if(!e){if(d&&d.getCenter){e=d.getCenter()}else{if(a.hasOwnProperty("center")){e=a.center}else{e=new c.LatLng(37.381592,-122.135672)}}}
The breakpoint seems to be on the line: new c.LatLng(37.381592,-122.135672).
Why would it suddenly start failing on a production build?
Update
This is the stack trace, but I can't find out what actually is the problem as the code is obfuscated/minified:
Uncaught TypeError: undefined is not a function VM1471:1
Ext.define.setMapCenterVM1471:1
Ext.define.updateUseCurrentLocationVM1471:1
jVM1471:1
b.implement.initConfigVM1471:1
etc...
The weird thing is, this worked using ST2.1. It also works in ST2.3 but only in Testing/Debug mode.
My code doesn't even set the center of the map when the view is initially shown:
This is the map view:
Ext.define('MyApp.view.offices.OfficeMap', {
extend: 'Ext.Panel',
alias: 'widget.officemapview',
requires: [
'Ext.Map'
],
config: {
layout: 'fit',
items: [
{
xtype: 'map',
listeners: {
activate: function(me, newActiveItem, oldActiveItem, eOpts){
console.log("activate fired");
},
maprender: function () {
console.log("maprender fired");
var gMap = this.getMap();
this.fireEvent('googleMapRender', gMap);
}
}
}
],
officeRecord: null
}
});
This is the controller code that receives the render event from the view:
onGoogleMapRender: function (googleMap) {
var record = this.selectedOffice;
var longi = record.get("Longitude");
var lati = record.get("Latitude");
console.log("About to create google maps pos")
console.log("About to create google maps marker")
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lati, longi)
});
console.log("About to set maps map object")
marker.setMap(googleMap);
setTimeout(function () {
console.log("map setTimeout")
// weird timeout issue? - http://stackoverflow.com/questions/15041697/sencha-touch-google-map-and-centering-a-marker
googleMap.setZoom(17);
googleMap.panTo(pos);
}, 500);
The error on the following browsers are:
Chrome - Uncaught TypeError: undefined is not a function
IE - Object does not support this function
Any ideas as to what is happening here?
Maybe check in chrome in developer tools on network tab what are the difference in loading javascript files between production mode and development mode.
That is because your javascript are loaded before the google maps javascript is loaded. So when setMapCenter get the function, there is no c yet (undefined). What you can do is use some callback, like "painted" and then set your "setMapCenter".
Update
Try to do this just to test:
xtype: "map",
listeners: {
activate: function(me, newActiveItem, oldActiveItem, eOpts){
me.config.mapOptions = {
center : new google.maps.LatLng(-42,-42), // your center
zoom : 14,
//others options
}
},
maprender: function(comp, map) {
var me = this;
var map = this.getMap();
// marker test
var position = new google.maps.LatLng(-42, -42);
var marker = new google.maps.Marker({
position: position,
title : 'Hello World',
map: map
});
}
}
I currently have an issue implementing a simple Google Places Autocomplete input in a webview.
My issue seems to be related to a bug in ios7 where the blur event is triggered before the place_changed has been fired, thus the input field doesn't take the chosen value.
Here is the code (part of an AngularJS directive):
var newAutocomplete = function () {
scope.gPlace = new google.maps.places.Autocomplete(element[0], opts);
google.maps.event.addListener(scope.gPlace, 'place_changed', function () {
scope.$apply(function () {
var place = scope.gPlace.getPlace();
if (!place || !place.geometry) {
return;
}
scope.location = {
coords: {
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng()
},
address: element.val()
};
});
});
};
Any idea how to handle this? Delaying the onBlur event?
Thanks in advance.
[SELF-ANSWERED]
I just found out the problem was related to the use of the FastClick library.
This is what needs to be added in the page to make it work:
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
Thanks to can't tap on item in google autocomplete list on mobile for the solution!
I'm newer in sencha. I'm creating a project with a image in panel view. I want touch points in my app for displaying the co-ordinates. How can i get the touch points. Any one can help me.
code:
Ext.define('ImageTouch.view.MyImg1', {
extend: 'Ext.Img',
height: 201,
width: 201,
src: 'resources/Dan.png',
initComponent: function() {
var me = this;
listeners:[
{
element: 'innerElement',
event: 'tap',
fn: function(e) {
console.log('TAP!');
var x = e.pageX,
y = e.pageY;
console.log(x ,y);
}
}
],
me.callParent(arguments);
}
});
please go through this
This page explain many examples in senja.
Search under the title "ringingEars/drag n drop javascript to iphone support ( iPhone)".
Please check this also.
I have some trouble with Jplayer. One block has two links to 2 mp3 tracks. Sing 1 and Sing 2. FF, IE, Safari and Chrome work with them by Jplayer correctly. But Opera dont.
$("#media01").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3:"/files/sing01.mp3"
});
},
swfPath: "/scripts/js/",
supplied: "mp3",
wmode: "window"
});
$('.popup-player a#media01').click(function(){
$("a#media02").removeClass('active');
$("#media02").jPlayer("pause");
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$("#media01").jPlayer("setMedia", {
mp3:"/files/sing01.mp3"
}).jPlayer("play");
} else {
$("#media01").jPlayer("pause");
}
});
// Second //
$("#media02").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3:"/files/sing02.mp3"
});
},
swfPath: "/scripts/js/",
supplied: "mp3",
wmode: "window"
});
$('.popup-player a#media02').click(function(){
$("a#media01").removeClass('active');
$("#media01").jPlayer("pause");
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$("#media02").jPlayer("setMedia", {
mp3:"/files/sing02.mp3"
}).jPlayer("play");
} else {
$("#media02").jPlayer("pause");
}
});
JS and JQuery - level bad :(
In Opera dont play tracks, or play one of this random, or play 0.5 sec of last
Thanks for answer.
Have you tried to set the fallback?
solution: "flash, html", // Flash with an HTML5 fallback.
or
solution: "html, flash", // HTML5 with an Flash fallback.
I'm just getting started with Sencha Touch 2 and I have never worked with Sencha Touch 1.x before. I've just finished this tutorial (which is the best starter tutorial I have found so far) http://miamicoder.com/2012/how-to-create-a-sencha-touch-2-app-part-1/ and now I want to go ahead and extend this Notes App.
I have a controller and 2 views, a list view and an edit view. In the edit view I want to be able to delete the current record. The delete function is in the controller. After tapping the delete button, I want to show a confirmation dialog ("Are you sure you want to delete...?"). After the user presses yes, the delete function should be called.
Now my problem is: How do I call the controllers delete function from within Ext.Msg.confirm?
Here are the relevant snippets of my code. Please let me know if something important is missing.
Please see the "onDeleteNoteCommand" function. "this.someFunction" obviously doesn't work since "this" is a DOMWindow.
Ext.define('TestApp2.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
noteEditorView: 'noteeditorview'
},
control: {
noteEditorView: {
deleteNoteCommand: 'onDeleteNoteCommand',
}
}
},
onDeleteNoteCommand: function() {
console.log('onDeleteNoteCommand');
var noteEditor = this.getNoteEditorView();
var currentNote = noteEditor.getRecord();
Ext.Msg.confirm(
"Delete note?",
"Do you reall want to delete the note <i>"+currentNote.data.title+"</i>?",
function(buttonId) {
if(buttonId === 'yes') {
//controller functions!! how to call them?
this.deleteNote(currentNote);
this.activateNotesList();
}
}
);
},
deleteNote: function(record) {
var notesStore = Ext.getStore('Notes');
notesStore.remove(record);
notesStore.sync();
},
activateNotesList: function() {
Ext.Viewport.animateActiveItem(this.getNotesListView(), this.slideRightTransition);
},
slideLeftTransition: { type: 'slide', direction: 'left' },
slideRightTransition: { type: 'slide', direction: 'right' },
launch: function() {
this.callParent();
Ext.getStore('Notes').load();
console.log('launch main controller');
},
init: function() {
this.callParent();
console.log('init main controller');
}
});
When you enter callback function of Ext.Msg the scope changes from controller scope to global scope (window), so you must set up it as parameter of confirm method:
Ext.Msg.confirm(
"Delete note?",
"Do you reall want to delete the note <i>"+currentNote.data.title+"</i>?",
function(buttonId) {
if(buttonId === 'yes') {
this.deleteNote(currentNote);
this.activateNotesList();
}
},
this // scope of the controller
);
For more info please check sencha docs: http://docs.sencha.com/touch/2-0/#!/api/Ext.MessageBox-method-confirm