For starters, my knowledge of javascript is not so great. But I have managed to implement a script that sends an email when my users start a video. For your information: It is a private location after login, so it is not a public website.
The problem is with this script it does not only send an e-mail on start of the video, it also sends an e-mail every time the user presses the pause and play button during watching the video. I only want to know when the video is started from the beginning of the video. So not every time it is paused and started again. Is this possible? And if so, how do I do this? Thanks so much for your help.
`<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
player.on('play', function() {
window.open("https://mywebsitelocation”, “myiframe”);
});
</script>`
I looked at the Vimeo API after I made my comment, and I think this should work:
player.on('play', function(event) {
if (event.seconds === 0) {
window.open('https://mywebsitelocation', 'myiframe');
}
});
Since there is a separate pause event in the API, I am a bit surprised that the above callback is triggered, as you say, when the player is paused too.
Perhaps if you add something like this:
player.on('pause', function() {});
...so that there's a separate do-nothing callback for pause, the play callback won't be triggered for pause.
Related
I have a javascript code that checks whether there are some people connected to a room in Twilio Programmable Video. If there are any participants, the javascript adds their remote video to the webpage.
// A function that adds a remote participant audio & video to the current web page.
function AddParticipantAudioAndVideo(participant) {
participant.tracks.forEach(publication => {
if (publication.track) {
document.getElementById("some html item").appendChild(track.attach());
console.log("track subscribed");
}
});
participant.on('trackSubscribed', track => {
document.getElementById("some html item").appendChild(track.attach());
console.log('track subscribed');
});
}
function InitializeRoom() {
// room is defined somewhere else
room.on('participantConnected', participant => {
console.log('A remote Participant connected : ' + participant.identity);
AddParticipantAudioAndVideo(participant);
});
// Loop over all the participants already connected to the room
room.participants.forEach(participant => {AddParticipantAudioAndVideo(participant)});
}
If I call this code from a button click for example, it works and live video plays properly :
<div onclick="InitializeRoom()">My Button</div>
However if I call the exact same code from the page load event handler (before any manual interaction with the page), it doesn't work and the video tag is not added to the html document.
window.addEventListener("load",function(event){
InitializeRoom();
});
I know that Chrome doesn't like videos with audio and autoplay = true. So I was wondering if this problem is due to the same reason and if there is any solution to that.
Thanks
Cheers,
I know that Chrome doesn't like videos with audio and autoplay = true. So I was wondering if this problem is due to the same reason and if there is any solution to that.
Yes, exactly.
Based on your other questions, I assume you're wanting to do this in some automated context where you have control over the browser. If so, you can add a flag to the Chrome/Chromium command line:
chrome.exe --autoplay-policy=no-user-gesture-required
See also: https://developer.chrome.com/blog/autoplay/#developer-switches
Right now I have a very basic HTML5 Audio player that play from webradio.
I use a old iPad to play the music but also to show some information from a webpage. The problem is that is happen sometime the wifi and the old iPad does not like to stay connect so it disconnect and reconnect and then the player stop play the webradio. I need somehow a script that notice in real time or every 1 min if the radio is not running and restart the player for me. I guess I can use Javascript but have search a Little and not find any good idea and it also have to work in Chrome. It looks that some javaScript does not work in specific webbrowser
Basically, your <audio> element will dispatch an error event. Just listen for that and then retry. You could also listen to the progress event to see when it starts receiving again and then call play from there. It'd be something roughly like this:
const audio = getAudioElement();
audio.addEventListener('error', () => { playing = false; /* handle error */ });
audio.addEventListener('progress', () => {
if (!playing) {
audio.play();
playing = true;
}
});
I'm trying to play a sound effect when the user clicks a button in my web app.
I first tried this method:
var sound = new Audio("soundeffect.ogg");
function clickHandler(){
sound.play();
}
However, if the user presses the button twice in quick succession, the sound is only played once. I assumed this is because the sound hasn't finished playing, and therefore isn't rewinded.
I then tried this solution.
var sound = new Audio("soundeffect.ogg");
function clickHandler(){
sound.currentTime = 0;
sound.play();
}
However, this causes the first sound to cut off before the next one is played.
I then tried this version, which creates a new sound effect each time the button is clicked:
function clickHandler(){
var sound = new Audio("soundeffect.ogg");
sound.play();
}
This works perfectly on my developer machine, but using android chrome on mobile data, the sound effect seems to have to load each time the button is clicked, causing a delay of several seconds before the sound is played.
I was hoping declaring the sound effect in the global scope, then cloning it might help keep it in the cache, but it didnt seem to help.
var sound = new Audio("soundeffect.ogg");
function clickHandler(){
var oneShotSound = sound.cloneNode();
oneShotSound.play();
}
I wrote a web audio library, Wad.js, which I think will help you in this case.
var sound = new Wad({ source : 'soundeffect.ogg' });
sound.play();
Wad.js will create a new audio buffer source node every time you call play(), so you can hear multiple instances of the same sound, but all of those audio buffer source nodes use the same audio buffer, which saves you lots of computational work.
Check it out. https://github.com/rserota/wad
However, cross-browser compatibility is not perfect. I expect it'll work in chrome for android, but I haven't tested it.
So i have a small problem in my website, first of all i made it with Wordpress, and i have a page with tabs every tab contain a video embedded from Youtube, my problem is when i passed from a tab to another the previous video doesn't stop, this is my code :
[tabgroup][tab title="Sport"]
[embedyt]https://www.youtube.com/watch?v=FVsgso273EE?theme=light[/embedyt][/tab]
[/tab]
[tab title="Action"]
[embedyt]https://www.youtube.com/watch?v=zuzaxlddWbk?theme=light[/embedyt][/tab]
[/tab]
[tab title="Strategi"]
[embedyt]https://www.youtube.com/watch?v=LKrRCADS7To?theme=light[/embedyt][/tab]
[/tab]
[/tabgroup]
and this is my page to understand the situation My-website
in my website you will find the videos tabs if you click in the SPIL menu item.
so plz if someone has any idea to do that i will be very appreciative :)
You can use the Youtube JavaScript API to do stuff like play, pause, seek to a certain time in a video, set the volume, mute the player, and other useful functions.
https://developers.google.com/youtube/js_api_reference
Just attach an event handler to your tabs that when clicked, get a reference to the current video, pause it then play the new one.
Here's a live demo of such functionality: https://developers.google.com/youtube/youtube_player_demo
If you are using HTML video tag you can use the code given below
var myVideo=document.getElementById("video1");
function playVid()
{
myVideo.play();
}
function pauseVid()
{
myVideo.pause();
}
Follow the given link as example http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_met_play_pause
I'm having a problem preloading HTML5 audio content and then using what I have in cache rather than attempting to redownload the audio every time I try to replay it.
http://cs.sandbox.millennialmedia.com/~tkirchner/rich/K/kungFuPanda2_tj/
The experience is suppose to be that when someone clicks on the banner, it pops up an ad with a loading bar. THe loading bar is loading all the images necessary for the animation. In the meantime, the audio is also getting loaded via audio tags already on in the DOM (which is fine). After all the images are loaded, the loading bar disappears and the user can continue on. There are 4 buttons on the bottom of the screen that they can click. Clicking one of them plays the audio file and images do a flipbook-style animation thats synced to the audio.
Audio Tags:
<audio id="mmviperTrack" src='tigress.mp3'></audio>
<audio id="mmmantisTrack" src='viper.mp3'></audio>
<audio id="mmtigressTrack" src='kungfu3.mp3'></audio>
<audio id="mmcraneTrack" src='crane.wav'></audio>
Play Button Event Listeners:
button.addEventListener('click',function(){
if ( f.playing ) return false;
f.playing = true;
button.audio.play();
},false);
button.audio.addEventListener('playing', function(){
animate();
}, false);
The problem is, in javascript, everytime I click play(), it reloads the audio file and then plays it. I can't seem to get it to load the audio once in the beginning and go off of whats stored in memory rather than try to reload the audio every single time I click the button.
I've tried experimenting with the preload and autobuffer properties, but it seems that mobile safari ignores those properties, because no matter what I set them too, the behavior is always the same. I've tried experimenting with source tags and different file formats... nothing.
Any ideas?
Alright, so the solution was a bit of a hack, cheat, workaround, whatever you want to call it.
What I noticed is that if I hit the play button on an audio file that I just played, it doesn't reload itself. It could be because I paused the audio after it finished playing through, but I'm not 100% sure on that. In any case, what I did is I combined all 4 audio files into one large audio file (yay Audacity~!). Then, every time I hit one of the play buttons I would set the currentTime property of the audio object to whatever the starting point of that track and then play the track until it hit its ending point, and then pause it again. Mission accomplished! Loaded once in the beginning and never again for each play.
Not crazy about the idea that I had to combine all the different audio tracks, but hey it works.
Oh, also. To get the audio track to load and fire a "canplaythrough" event, I attached this function to a user click event:
var track;
function addHTMLAudio() {
track = document.createElement('audio');
track.id = 'mm_audio'
track.autoplay = false;
track.preload = false;
track.addEventListener('canplaythrough',function(){
track.removeEventListener('canplaythrough');
audioLoaded = true;
},false);
document.getElementById('body').appendChild(track);
track.src = f.trackURL;
track.play();
setTimeout(function(){ track.pause(); },1);
}
playButton.addEventListener('click',function(e){
if ( playStatus > 0 ) return;
playStatus = 1;
var myId = e.target.parentNode.id;
var myClip = findClip( myId );
myClip.state = 'active';
track.currentTime = myClip.tIndex.start;
track.play();
runAnimation(myClip);
},false);