I'm trying to manipulate an audio file (mp3), using <audio> and javascript but nothing happens when I click the link. The alert() is working but nothing happens with the audio i.e. no pause, no play, nothing..., whether in Safari or Firefox. Is the coding dodgy or what?
Check this out:
jQuery/javascript:
$(document).ready( function(){
var audioElement = document.getElementById('audio_player');
$('div.audioControls .play').live('click', function(){
//alert('play');
audioElement.play();
});
$('div.audioControls .pause').live('click', function(){
//alert('pause');
audioElement.pause();
});
$('div.audioControls .playatTime').live('click', function(){
alert('play at time: 30 sec');
audioElement.currentTime = 30;
audioElement.play();
return false;
});
});
HTML:
<audio id="audio_player" controls="controls" src="aaliyah.mp3">
Your browser does not support the audio element.
</audio>
<div class="audioControls">
play
pause
play at 35 secondes
</div>
Thanks!
I now know why, it didn't work. To make use of the javascript API, the controls attributes needs to be removed from the html tag itself and it should work.
Thanks
Related
Given:
<video poster="assets/videos/poster.png"
#videoPlayer
onloadedmetadata="this.muted = true">
<source src="assets/videos/video.mp4" type="video/mp4">
</video>
And in Angular:
...
public videoLoaded: boolean = false;
...
How can I bind videoLoaded to update once the video starts playing? (or is loaded) I've looked online and saw some older jquery implementations that seem to not be working in newer versions of chrome and want to know the latest way on how to accomplish this
Thanks
What you could do is make a reference to the video player itself with Angular's ViewChild and check if it's clicked.
#ViewChild('videoPlayer') videoPlayer: ElementRef;
videoClicked = false;
startVideo(): void {
this.videoClicked = true;
this.videoPlayer.nativeElement.play();
}
The startVideo() method will be used inside the HTML to trigger the change. The additional paragraph is used to see the change.
<video (click)="startVideo()" width="400"
#videoPlayer>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
<p>Video clicked: {{videoClicked}}</p>
See this StackBlitz as an example of above behaviour.
Edit
A better way to do this is to use HTMLMediaElement's onplaying and loadeddata event. See MDN for documentation on onplaying and documentation on onplaying. In normal JavaScript it would look like this:
const video = document.querySelector('video');
video.onplaying = (event) => {
console.log('Video is no longer paused.');
};
In Angular, there are some small changes required. The HTML can stay pretty clean.
<video controls width="400"
#videoPlayer>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
<p>Video loaded: {{dataLoaded}}</p>
<p>Video started: {{videoStarted}}</p>
The biggest changes are in the component, ngAfterViewInit checks if the element is there after view has been initialised. The loadeddata event is fired when the frame at the current playback position of the media has finished loading (so ready to play). Next to that, you can access the element's onplaying event to check if the video is not paused.
#ViewChild('videoPlayer') videoPlayer: ElementRef;
dataLoaded = false;
videoStarted = false;
ngAfterViewInit() {
this.videoPlayer.nativeElement.onloadeddata = (event) => {
console.log('Video data is loaded.');
this.dataLoaded = true;
};
this.videoPlayer.nativeElement.onplaying = (event) => {
console.log('Video is no longer paused.');
this.videoStarted = true;
};
}
Here's a StackBlitz example to show this example.
you can use HTML Audio/Video Events provided by html 5 video attribute.
loadeddata -> Fires when the browser has loaded the current frame of the audio/video
loadedmetadata -> Fires when the browser has loaded meta data for the audio/video
loadstart -> Fires when the browser starts looking for the audio/video
Currently I am using following code to play some audio after a link is clicked:
Pronunciation of a word
For now if the user clicks on the link, a new page with an audio playing panel is loaded. After playing the audio, the user has to click GO BACK button of the browser to get back to the original content.
Is it possible to play the audio without being directed to a new page? When the user clicks on the link, the audio just plays in the background?
(Don't want to use embed because it's just a 1 second audio for a word's pronunciation as a minor explanation of an uncommon word).
Actually the href attribute is redirecting you to the new page, you can use e.prevenDefault() in the link click event handler to stop this redirection and create a dynamic audio element with this href as source and play it.
This is what you need:
function playItHere(e, link) {
var audio = document.createElement("audio");
var src = document.createElement("source");
src.src = link.href;
audio.appendChild(src);
audio.play();
e.preventDefault();
}
Pronunciation of a word
In html5, you can actually use the <audio> tag to get that done!
<audio src="/music/myaudio.ogg" autoplay> Sorry, your browser does not support the <audio> element. </audio>
SOURCE: Wired
If you use a tag be careful with href .
Code snippet fixed .
First you will need to make convert ogg to the mp3 and than use it for multi source .
Small browser detector (chrome/opera/safari - mp3 and mozilla - ogg . )
E("PLAYER").addEventListener("error", function(e) {
console.log("error: " + e.target.error)
});
function PLAYER_BACKGROUND(what) {
var SOURCE_PATH = E(what).getAttribute("whattoplay")
if (isChrome == true)
{
SOURCE_PATH = SOURCE_PATH.replace(".ogg" , ".mp3")
}
else {
SOURCE_PATH = SOURCE_PATH.replace( ".mp3" , ".ogg" )
}
E("PLAYER").src = SOURCE_PATH
E("PLAYER").play()
}
<script>
var E = function(id){return document.getElementById(id)};
var isChrome = /Chrome/.test(navigator.userAgent) || /Safari/.test(navigator.userAgent);
</script>
<a id="audio_1" onclick="PLAYER_BACKGROUND(this.id)" whattoplay="https://maximumroulette.com/framework/res/audio/laser7.ogg" href="javascript:void(0)">Pronunciation of a word</a>
<audio style="display:none" id="PLAYER" autoplay controls>
<source src="#" type="audio/ogg">
<source src="#" type="audio/mpeg">
Sorry, your browser does not support the element.
</audio>
I was wondering if any event can be called after an HTML video have been played.
$("video").bind("ended", function() {
this.load();
$('video').prop("autoplay", false);
});
you can add- video.addEventListener('ended',function() {});
I have this audio mp3 which I wanna play in browser. The mp3 has an accompanying image and a url to navigate to when I click. So I put the mp3 in a video tag and made the image a poster like this
//cache the poster
var img = document.createElement("img");
img.src = "http://lorempixel.com/300/200";
// to make sure the poster is loaded before the video player appears
img.addEventListener("load", function(){
var video = document.getElementById("demo-player");
video.style.display = 'block';
console.log("loaded!");
});
delete img;
<video id="demo-player" controls="controls" style="display: none;"
src="http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2003.mp3"
poster="http://lorempixel.com/300/200">
</video>
Now I want to make the poster clickable which I intend to do by creating a click event listener on the video tag. My questions are
Is it correct to override the video's click event to make poster clickable? ( Are there any alternate methods?)
Is there a way I can bring in cursor: pointer to the poster?
P.S: I am using the video tag here because, my audio will be an ad/announcement with an image and a link to navigate(if interested). And after this 4-5 second pre-roll audio, there will be a lengthy content video.
Apply css cursor: pointer property for the video tag. For handling click event attach a click event handler. I don't think anything is wrong with using click event handler on video tag which doesn't effect the video controllers.
//cache the poster
var img = document.createElement("img");
img.src = "http://lorempixel.com/300/200";
// to make sure the poster is loaded before the video player appears
img.addEventListener("load", function() {
var video = document.getElementById("demo-player");
video.style.display = 'block';
console.log("loaded!");
video.addEventListener('click', function() {
console.log('clicked');
});
});
delete img;
video {
cursor: pointer;
}
<video id="demo-player" controls="controls" style="display: none;" src="http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2003.mp3" poster="http://lorempixel.com/300/200">
</video>
I include the YouTube player as follows in my php file but the player does not show the fullscreen button. Switching to the flash player works (whether through changing the url from /embed to /v or by disabling &html5=1). What am I doing wrong?
An example is available here: http://jonnyrimkus.square7.ch/stuff/youtube_html5_fullscreen.php
<script>
var tag = document.createElement(\'script\');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName(\'script\')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
player = new YT.Player(\'player\', {
playerVars: {
\'allowfullscreen\': \'true\',
\'allowscriptaccess\': \'always\'
},
events: {
\'onReady\': onYouTubePlayerReady,
\'onStateChange\': playerStateChange,
\'onError\': playerStateError
}
});
}
</script>
<iframe id="player" width="425" height="356" border="0" frameborder="0" src="http://www.youtube.com/embed/36XdO9Iv9ew?enablejsapi=1&playerapiid=lastfmplayer&autoplay=1&html5=1&fs=1&origin=http://jonnyrimkus.square7.ch"></iframe>
The fullscreen button will also not be visible if the Youtube player is inside another iframe that does not have allowfullscreen attribute.
Unlike what Google's documentation says(as of 11/2014), the fs attribute in querystring does not seem to influence the visibility of fullscreen. The visibility seems to be influenced by allowfullscreen attribute in iframe which youtube player puts by default during instantiation. That said, if your embed the player inside another iframe you should also mark that iframe for allowfullscreen ( or all its variants webkitallowfullscreen mozallowfullscreen)
<iframe src='' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen>
<!-- YT player-->
</iframe>
The way you are using the iframe api now does nothing, the api is made to bind on an empty element, like <div id="player"></div>, the id is the first argument in the new YT.Player function.
In order to load a youtube video with the iframe api you need this in the body:
<div id="player"></div>
<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: 480,
width: 640,
videoId: "36XdO9Iv9ew",
});
}
</script>
There is no need to explicitely specify you want to enable fullscreen when using the iframe api.
You can also just use the iframe without the api, you'll need to specify you want fullscreen when you use it.
<iframe width="640" height="480" frameborder="0" id="player" allowfullscreen="1" title="YouTube video player" src="http://www.youtube.com/embed/36XdO9Iv9ew?enablejsapi=1"></iframe>
Just using the iframe tag is a bit faster, but if you want to use the extra features of the iframe api you have no choice.
A page with examples (also check the source): http://qnet.co/yt
You can also implement the fullscreen feature yourself (not needed for Youtube, but still cool):
var goFullscreen = function(id) {
var el = document.getElementById(id);
if (el.requestFullScreen) {
el.requestFullScreen();
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if (el.webkitRequestFullScreen) {
el.webkitRequestFullScreen();
}
}
var leaveFullscreen = function() {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
and to make the Youtube player go fullscreen with: goFullscreen('player'), and leave fullscreen with: leaveFullscreen()
The different versions of requestFullscreen and cancelFullscreen are for different browsers, because the standard is not yet completely finished
More info on Javascript Fullscreen: http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ (relative old document, but still valid)
off-topic: It is useless to echo such a string with php, you can just paste it in the body the file outside of the php tags.
This is still an issue in July 2014, and you just wonder if Google will ever fix this. Actually you can force the Flash player in another way at the client end by using a UA Spoofer, and for Google Chrome browser for instance, Chrome Web Store - djflhoibgkdhkhhcedjiklpkjnoahfmg and then spoof a browser that doesn't understand HTML5.
Actually HTML5 video is still a disaster, and the grainey spikey-jaggy edges to the video and the herringbone patterning though faint is still distracting. Whereas Flash is Smooth, Flawless, Reliable, and Sharp edges with zero patterning artifacts.
HTML5 - still big thumbs down, I wouldn't inflict it on users.
Oh yes and still Fullscreen not appear in embeds like this
Rick Astley - Never Gonna Give You Up # viewpure embed
http://viewpure.com/dQw4w9WgXcQ
You can use the above example to fiddle and diddle with different browser plugins.