I'm having trouble with Flowplayer. I get the videos to run and everything on the iOS devices, however once the video ends it immediately starts playing again. or it'll drop the video, but the audio loops again. It's almost as if continuousPlay is set to true.
here's the code I'm working with. Let me know if I've done something odd, or am just forgetting to add something that will get the video to stop when it should. Any help would be greatly appreciated.
the HTML code:
<div style="display: block; width: 640px; height: 360px; margin: 0 auto;" id="player1">
</div>
The script code:
flowplayer("player1", { src: "/flowplayer/flowplayer.swf", wmode: "direct" }, {
plugins: { controls: null }
, clip: { url: 'Videos/vid.mp4'
, autoPlay: true
, autoBuffering: true
, bufferLength: 7
, accelerated: true
, continuousPlay: false
, loop: false
, onBeforePause: function () { return false; }
, onBeforeSeek: function () { return false; }
, onBeforeStop: function () { return false; }
, onBeforeFinish: function () { ShowNextButton(); }
}
, onLoad: function () { this.setVolume(80); }
, onFinish: function () { ShowNextButton(); }
, onKeyPress: function () { return false; }
}).ipad();
function ShowNextButton() {
$f().onBeforeClick(function () { return false; });
$f().hide();
var nextButton = document.getElementById('ctl00_ContentPlaceHolder2_btnNext');
nextButton.style.cursor = 'pointer';
nextButton.style.display = 'inline';
nextButton.style.visibility = 'visible';
}
Related
this is a additional question to a (solved) question I had here
I have managed to get video for my project working on mobile & desktop using the component from this glitch project
init: function () {
this.onClick = this.onClick.bind(this);
},
play: function () {
window.addEventListener('click', this.onClick);
},
pause: function () {
window.removeEventListener('click', this.onClick);
},
onClick: function (evt) {
var videoEl = this.el.getAttribute('material').src;
if (!videoEl) { return; }
this.el.object3D.visible = true;
videoEl.play();
}
});
however, on mobile devices, a separate component to play sound from an entity is not working (it works on chrome and safari)
init: function () {
this.onClick = this.onClick.bind(this);
},
play: function () {
window.addEventListener('click', this.onClick);
},
pause: function () {
window.removeEventListener('click', this.onClick);
},
onClick: function (evt) {
let entity = document.querySelectorAll('[sound]');
for (let item of entity) {
item.components.sound.playSound();
}
}
});
I am really confused, I have tried a few separate solutions but nothing seems to be working.
The only time I can get audio to play on mobile is by using this component however it is unsuitable as it only plays audio when the individual objects/entities are clicked, and I need all my sounds to play at once, by a click on the document window.
any help would be appreciated !!
EDIT
here is a code snippet of my project to show issue
UPDATE
I have managed to get the component working on mobile but now spatial sound is broken:
JS:
AFRAME.registerComponent('singleton-sound', {
schema: {
src: {type: 'string'},
autoplay: {default: false},
distanceModel: {default: 'inverse', oneOf: ['linear', 'inverse', 'exponential']},
loop: {default: false},
maxDistance: {default: 10000},
on: {default: ''},
poolSize: {default: 1},
positional: {default: true},
refDistance: {default: 1},
rolloffFactor: {default: 1},
volume: {default: 1}
},
multiple: true,
init: function () {
var audio = document.querySelector(this.data.src);
window.addEventListener('click', playIfFree);
// window.addEventListener('mouseenter', playIfFree);
audio.addEventListener('ended', function () {
window.isPlaying = true
})
function playIfFree () {
if(!window.isPlaying) {
audio.play();
window.isPlaying = false
} else {
return false
}
}
}
});
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelector('#overlay').style.display = 'flex';
document.querySelector('#overlay').addEventListener('click', function () {
let sounds = document.querySelectorAll('audio');
sounds.forEach (function (sound) {
sound.play();
sound.pause();
})
this.style.display = 'none';
})
});
HTML
<a-entity
gltf-model="#alice"
navigate-on-click="url: alice.html"
singleton-sound="
src: #aliceaudio;
volume: 1;
distanceModel: inverse;
rolloffFactor: 2"
position="-0.06 1.5 11.594"
rotation="90 180 0"
scale="0.4 0.4 0.4"
foo
></a-entity>
How to create play and pause functionality in bookblock.js.
below is my js function which is invoked on click of play/pause button.
i am not able to pause(and again recycle) the slideshow using this function. what is wrong in this.
function playPauseSlide(obj) {
if (isPlay) {
$(obj).find('i').removeClass('glyphicon-pause').addClass('glyphicon-play');
$('#bb-bookblock').bookblock({ autoplay: false });
} else {
$(obj).find('i').removeClass('glyphicon-play').addClass('glyphicon-pause');
$('#bb-bookblock').bookblock({ autoplay: true, interval: 1000 });
}
isPlay = !isPlay;
}
after lots of trying i finally added play and pause functions in slide show by customizing the script.
jquery.bookblock.js
_pauseSlideshow: function () {
if ( this.options.autoplay ) {
clearTimeout( this.slideshow );
}
},
//// public method: pause the slide show
pause: function () {
this._pauseSlideshow();
},
//// public method: play again the paused slide show
playAgain: function () {
this.options.autoplay = true;
this._navigate('next', this.$currentItem);
this._startSlideshow();
},
In my view script
var config = {
$bookBlock: $('#bb-bookblock'),
$navNext: $('#nextPage'),
$navPrev: $('#prevPage'),
$navFirst: $('#bb-nav-first'),
$navLast: $('#bb-nav-last'),
$pause: $('#pause'),
$playAgain: $('#playAgain'),
},
initEvents = function () {
config.$pause.on('click touchstart', function () {
config.$bookBlock.bookblock('pause');
return false;
});
config.$playAgain.on('click touchstart', function () {
config.$bookBlock.bookblock('playAgain');
return false;
});
});
It is possible to declare 2 more functions in main function like this ?
var jquery4u = {
init: function() {
jquery4u.countdown.show();
},
countdown: function() {
show: function() {
console.log('show');
},
hide: function() {
console.log('hide');
}
}
}
jquery4u.init();
and i receive the following error: Uncaught SyntaxError: Unexpected token ( on this line "show: function() {"
Remove the function from the right of the countdown (demo)
var jquery4u = {
init: function() {
jquery4u.countdown.show();
},
countdown: {
show: function() {
console.log('show');
},
hide: function() {
console.log('hide');
}
}
}
jquery4u.init();
Next time, use jsFiddle to make a demo and click the "JSHint" button.
Actually, none of this will work. Unless you make countdown an object or you treat its sub-functions as proper functions.
Why: Under countdown, you created an instance of object not a function.
var jquery4u = {
countdown: function() {
show = function() {
console.log('show');
}
hide = function() {
console.log('hide');
}
jquery4u.countdown.show();
}
}
The above code is a valid code so it is possible. Unfortunately it will not return anything.
The proper way to do this is in this format:
var jquery4u = {
countdown: {
show: function() {
console.log('show');
},
hide: function() {
console.log('hide');
}
}
}
This will work. You can try it out by calling:
jquery4u.countdown.show();
For my website I use the ION.sound plugin and i would like to pause a fragment and play it again with the same button. Unfortunately, Jquery's .toggle has been removed in version 1.9 and can not be used anymore. How could I turn this audiofragment on and off with the same button? This is what i have so far:
$.ionSound({
sounds: [
"track_radio"
],
path: "sounds/",
multiPlay: true,
volume: "0.8"
});
playRadio = function() {
$.ionSound.play("track_radio");
}
stopRadio = function() {
$.ionSound.stop("track_radio");
}
$("#speakers").click(function(event){
playRadio();
});
You need something to track the playing status and check it when clicked.
$.ionSound({
sounds: [
"track_radio"
],
path: "sounds/",
multiPlay: true,
volume: "0.8",
playing: false;
});
onOffRadio = function() {
$.ionSound.play("track_radio");
$.ionSound.playing = true;
}
stopRadio = function() {
$.ionSound.stop("track_radio");
$.ionSound.playing = false;
}
$("#speakers").click(function(event){
if ($.ionSound.playing) {
stopRadio();
}
else {
playRadio();
}
});
You can simply make use of the 'text' attribute of the button element.
<button id="play-pause">Play</button>
$("#play-pause").click(function() {
if($(this).text() == 'Play') {
playRadio();
$(this).text('Pause');
}
else {
pauseRadio();
$(this).text('Play');
}
});
Here's the fiddle
i am create simple app using sencha touch 2 + java script + html 5 which change / slide html pages automatically.
i write below code to slide html pages using DelayedTask task but the code is not working .
Main.js
Ext.create('Ext.Carousel', {
fullscreen: true,
xtype:'carousel',
cls:'carousel',
defaults: {
styleHtmlContent: true
},
config: {
ui : 'light',
},
listeners:
{
'afterrender': function(carousel) {
carousel.pageTurner = new Ext.util.DelayedTask(function() {
if (this.getActiveIndex() == this.items.length - 1) {
this.setActiveItem(0, 'slide');
}
else {
this.next();
}
this.pageTurner.delay(6000);
}, carousel);
carousel.pageTurner.delay(6000);
}
},
items: [
{
html : '<img src="resources/images/Picture1.png" width="100%" height = "100%" align="middle" /> <audio autoplay loop><source src="resources/audio/kalimba.mp3"></audio>',
style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
},
{
html : '<img src="resources/images/Picture2.png" width="100%" height = "100%" margin=0 align="middle" /> ',
style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
},
{
html : '<img src="resources/images/Picture3.png" width="100%" height = "100%" margin=0 align="middle" />',
style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
},
{
html : '<img src="resources/images/Picture3.png" width="100%" height = "100%" margin=0 align="middle" />',
style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
}
]
});
i write this code to auto side but its not working please help me..
There are quite many errors in your code. Please try this, as I've tested, it works (changes are only made to listeners):
listeners:
{
'show': function(carousel) {
carousel.pageTurner = new Ext.util.DelayedTask(function() {
if (carousel.getActiveIndex() == carousel.items.length - 2) {
carousel.setActiveItem(0, 'slide');
}
else {
carousel.next();
}
}, carousel);
carousel.pageTurner.delay(1000);
},
'activeitemchange': function(carousel){
if (carousel.getActiveIndex() == 0) {
carousel.fireEvent('show',this);
} else
carousel.pageTurner.delay(1000);
},
},
Some explanation:
afterrender event is replaced by paint event in Sencha Touch 2. In this situation, you can also use show event.
to set delay time after each cardswitch, you need to listen to activeitemchange event
Hope it helps.
I know there already an accepted answer, but here is my implementation of this (for sencha touch v2.2)
Tapping or manually sliding the image will pause the slideshow. Tapping again will resume.
Make sure you apply this to xtype: 'carousel'
{
xtype: 'carousel',
//...your config stuff here...
carouselSlideDelay: 3500,
autoSlide: true,
listeners: {
initialize: function(carousel) {
if (this.autoSlide) {
carousel.isRunning = false;
this.start(carousel);
// Add tap event.
carousel.element.on('tap', function(e, el){
if (!carousel.isRunning) {
carousel.next();
this.start(carousel);
} else {
this.stop(carousel);
}
}, this);
// Add drag event.
carousel.element.on('dragstart', function(e, el){
this.stop(carousel);
}, this);
}
}
},
start: function(carousel, delay) {
// If already running.
if (carousel.isRunning) { return; }
// Allow for overriding the default delay value.
var delay = (delay !== undefined ? delay : this.carouselSlideDelay);
carousel.isRunning = true;
carousel.timerId = setInterval(function () {
carousel.next();
if (carousel.getActiveIndex() === carousel.getMaxItemIndex()) {
carousel.setActiveItem(0);
}
}, delay);
},
stop: function(carousel) {
clearInterval(carousel.timerId);
carousel.isRunning = false;
}
}
And this was loosely based off the Sencha Touch demo here.
After chrome 43 bug. Auto carousel is not working in my app. so i did some customization
direction: 'horizontal',
delay: 10000,
start: true,
indicator:false,
listeners:
{
activate: function(homeScreenCarousel) {
var me=this;
homeScreenCarousel.pageTurner = new Ext.util.DelayedTask(function() {
if (me.getActiveIndex() == me.items.length-1) {
me.setActiveItem(0,'slide');
}
else {
me.setActiveItem(me.getActiveIndex()+1,'slide');
}
me.pageTurner.delay(8000);
}, homeScreenCarousel);
homeScreenCarousel.pageTurner.delay(8000);
},
activeitemchange:function(homeScreenCarousel){
var me=this;
homeScreenCarousel.pageTurner = new Ext.util.DelayedTask(function() {
if (me.getActiveIndex() == me.items.length - 1) {
me.setActiveItem(0, 'slide');
}
else {
me.setActiveItem(me.getActiveIndex()+1,'slide');
}
homeScreenCarousel.pageTurner.delay(8000);
}, homeScreenCarousel);
}
},