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.
Related
Trying to use leaflet-side-by-side plugin in Vue2Leaflet.
mounted() {
this.$nextTick(() => {
this.map = this.$refs.myMap.mapObject;
this.layer1 = this.$refs.leftLayer.mapObject;
this.layer2 = this.$refs.rightLayer.mapObject;
L.control.sideBySide(this.layer1, this.layer2).addTo(this.map);
});
}
This works fine in PC and android browser, but in iOS, the map couldn't be dragged(for both safari and chrome for iOS).
After removing the layer2, the map can be dragged again.
mounted() {
this.$nextTick(() => {
this.map = this.$refs.myMap.mapObject;
this.layer1 = this.$refs.leftLayer.mapObject;
// this.layer2 = this.$refs.rightLayer.mapObject;
L.control.sideBySide(this.layer1, this.layer2).addTo(this.map);
});
}
Is this the proper way to use this plugin in Vue2leaflet?
Well, after deep study, this is one of the bug in leaflet-side-by-side.
Still don't know how to fix it.
This works for me:
<LMap
:zoom="zoom"
:center="center"
#update:center="centerUpdated"
ref="map"
:watch="true"
:options="{ zoomControl: false, dragging: mobileDragg, tap: mobileTap }"
>
Methods:
// Leaflet mobile fix
mobileDragg() {
return !L.Browser.mobile;
},
// Leaflet mobile fix
mobileTap() {
return !L.Browser.mobile;
},
I'm having problems trying to record audio into a file. I'm trying to run the sample code (with the required permissions in the tiapp.xml) but i'm always getting errors (like "+[NSBlock boundBridge:withKrollObject:]: unrecognized selector sent to class 0x1b5549500"; at the stop() action).
I can't find a module for audio recording (i've used the tutorial.audiorecord but it doesn't work in newest versions of SDK)
This is the sample code from the appcelerator documentation page https://docs.appcelerator.com/platform/latest/#!/api/Titanium.Media.AudioRecorder
I try everything but doesn't work.
Someone have a working example or a module for Appcelerator SDK 7?
var window = Ti.UI.createWindow({
backgroundColor: '#fff'
});
var recordStart = Ti.UI.createButton({
title: 'Start',
top: 10
});
var recordPause = Ti.UI.createButton({
title: 'Pause',
top: 60
});
var recordStop = Ti.UI.createButton({
title: 'Stop',
top: 110
});
var recordPlay = Ti.UI.createButton({
title: 'Play',
top: 160
});
var audioRecorder = Ti.Media.createAudioRecorder();
var record;
var audioPlayer;
window.addEventListener('open', function(e) {
if (!Ti.Media.hasAudioRecorderPermissions()) {
Ti.Media.requestAudioRecorderPermissions(function(e) {
if (e.success) {
window.add(recordStart);
}
});
} else {
window.add(recordStart);
}
});
recordStart.addEventListener('click', function(e) {
audioRecorder.start();
});
recordPause.addEventListener('click', function(e) {
if (audioRecorder.getPaused()) {
recordPause.setTitle('Pause');
audioRecorder.resume();
} else {
recordPause.setTitle('Resume');
audioRecorder.pause();
}
});
recordStop.addEventListener('click', function(e) {
record = audioRecorder.stop();
Ti.API.info(record.getNativePath());
});
recordPlay.addEventListener('click', function(e) {
audioPlayer = Ti.Media.createAudioPlayer({
url: record.getNativePath()
});
audioPlayer.start();
});
window.add(recordPause);
window.add(recordStop);
window.add(recordPlay);
window.open();
Thanks in advance
This is an example using Titanium's Hyperloop: https://gist.github.com/dinahgarcia/119ac00c91334d3951601cf347bad8d4
To be able to use it you need to enable Hyperloop: https://docs.appcelerator.com/platform/latest/#!/guide/Enabling_Hyperloop
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";
});
I have an audio device with 4 inputs microphones..
Someone knows if i can use all these inputs with Web audio API ?
Thanks !
It should work by calling getUserMedia four times, choosing a different device each time, and using createMediaStreamSource four times, although I haven't tested.
yes,you can list all input devices and select one to use.
<html><body>
<select id="devices_list"></select>
<script>
function devices_list(){
var handleMediaSourcesList = function(list){
for(i=0;i<list.length;i++){
var device= list[i];
if(device.kind == 'audioinput') {
document.querySelector('#devices_list').options.add(new Option(device.label ,device.deviceId));
}
}
}
if (navigator["mediaDevices"] && navigator["mediaDevices"]["enumerateDevices"])
{
navigator["mediaDevices"]["enumerateDevices"]().then(handleMediaSourcesList);
}
// Old style API
else if (window["MediaStreamTrack"] && window["MediaStreamTrack"]["getSources"])
{
window["MediaStreamTrack"]["getSources"](handleMediaSourcesList);
}
}
function usemic(){
navigator.getUserMedia ({
"audio":{
"optional": [{
"sourceId": document.querySelector('#devices_list').value
}]
}}, function (stream) {
//...some code to use stream from mic
},function(err){
debuginfo('getMedia ERR:'+err.message );
});
}
</script>
</body></html>
I am trying to get some information from twitter using CasperJS. And I'm stuck with infinite scroll. The thing is that even using jquery to scroll the page down nothings seems to work. Neither scrolling, neither triggering the exact event on window (smth like uiNearTheBottom) doesn't seem to help.
Interesting thing - all of these attempts work when injecting JS code via js console in FF & Chrome.
Here's the example code :
casper.thenEvaluate(function(){
$(window).trigger('uiNearTheBottom');
});
or
casper.thenEvaluate(function(){
document.body.scrollTop = document.body.scrollHeight;
});
If casper.scrollToBottom() fails you or casper.scroll_to_bottom(), then the one below will serve you:
this.page.scrollPosition = { top: this.page.scrollPosition["top"] +
document.body.scrollHeight, left: 0 };
A working example:
casper.start(url, function () {
this.wait(10000, function () {
this.page.scrollPosition = { top: this.page.scrollPosition["top"] + document.body.scrollHeight, left: 0 };
if (this.visible("div.load-more")) {
this.echo("I am here");
}
})});
It uses the underlying PhantomJS scroll found here
CasperJs is based on PhantomJS and as per below discussion no window object exist for the headless browser.
You can check the discussion here
On Twitter you can use:
casper.scrollToBottom();
casper.wait(1000, function () {
casper.capture("loadedContent.png");
});
But if you include jQuery... , the above code won't work!
var casper = require('casper').create({
clientScripts: [
'jquery-1.11.0.min.js'
]
});
The script injection blocks Twitter's infinite scroll from loading content. On BoingBoing.net, CasperJS scrollToBottom() works with jQuery without blocking. It really depends on the site.
However, you can inject jQuery after the content has loaded.
casper.scrollToBottom();
casper.wait(1000, function () {
casper.capture("loadedContent.png");
// Inject client-side jQuery library
casper.options.clientScripts.push("jquery.js");
// And use like so...
var height = casper.evaluate(function () {
return $(document).height();
});
});
I have adopted this from a previous answer
var iterations = 5; //amount of pages to go through
var timeToWait = 2000; //time to wait in milliseconds
var last;
var list = [];
for (i = 0; i <= iterations; i++) {
list.push(i);
}
//evaluate this in the browser context and pass the timer back to casperjs
casper.thenEvaluate(function(iters, waitTime) {
window.x = 0;
var intervalID = setInterval(function() {
console.log("Using setInternal " + window.x);
window.scrollTo(0, document.body.scrollHeight);
if (++window.x === iters) {
window.clearInterval(intervalID);
}
}, waitTime);
}, iterations, timeToWait);
casper.each(list, function(self, i) {
self.wait(timeToWait, function() {
last = i;
this.echo('Using this.wait ' + i);
});
});
casper.waitFor(function() {
return (last === list[list.length - 1] && iterations === this.getGlobal('x'));
}, function() {
this.echo('All done.')
});
Essentially what happens is I enter the page context, scroll to the bottom, and then wait 2 seconds for the content to load. Obviously I would have liked to use repeated applications of casper.scrollToBottom() or something more sophisticated, but the loading time wasn't allowing me to make this happen.