I am working on a music player. I am successfully able to play audio from urls and getting notification of the playing music.
I can use the play/pause button to play/pause the music ( it worked automatically), but I don't know how to implement the next and previous buttons.
I am using latest version of Chrome (84.0.4147.89).
[Edit 1]
Minimum Reproducible Code:
<html>
<head>
<title>Xt3m1xMus1c</title>
</head>
<body>
<audio id="song" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" autoplay></audio>
</body>
<script>
function nextSong() {
// Need to call this function when I press the next button on the notification
document.getElementById("song").setAttribute('src', "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3");
}
</script>
</html>
These buttons can be controlled with the Media Session API. To implement the previous and next buttons you need to set the corresponding action handlers.
navigator.mediaSession.setActionHandler(
'nexttrack',
() => { /* Your code to play the next track. */ }
);
navigator.mediaSession.setActionHandler(
'previoustrack',
() => { /* Your code to play the previous track. */ }
);
But I think the buttons shown in the picture are the 'seekbackward' and 'seekforward' buttons.
Related
I hid control panel of video on mobile using this "video::-webkit-media-controls-panel{display:none}" in responsive.css because it occupy the height of video.
But I want to show the control panel when user click the video screen.
How can I make it? Any help would be appreciated.
than you
Rather than use the shadow DOM, have you tried making controls visible or not - in this instance they're hidden by default but get shows when the user clicks and hidden when the user mouses out (could trigger on a click elsewhere, or when the video starts playing for instance)
<video width="400" controls id="video" onclick="mox(true);" onmouseout="mox(false);">
<source src="bigbuck.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
// get the video element
var video = document.getElementById("video");
// attach a listener to hide controls when video starts playing
// note: you probably want some more logic to make this a more usable experience
video.addEventListener('playing', mox(false),false);
// hides the controls
mox(false)
function mox(s) {
if (s) {
video.controls = "controls";
} else {
video.controls = "";
}
}
</script>
I am trying to show the poster image once the video ends and here is the code. However the poster image is not showing up. Any clues why this is not happening?
The ideal steps would be
1. Pause video
2. Init at first frame
3. Remove default controls
4. Show poster image.
Code:
document.getElementById("video1").addEventListener("ended", function () {
document.getElementById("video1").pause();
document.getElementById("video1").currentTime = 0;
document.getElementById("video1").removeAttribute("controls");
document.getElementById("video1").setAttribute("poster", "graphic.jpg");
});
Try this one:
document.getElementById("video1").addEventListener("ended", function () {
this.load()
});
You know those webcams you can control over the internet? When you push the button to go left, it moves to the left.. but nothing else happens on the page.. Thats what I need to create.
I have a page that allows me to control lights in my house. When I click the button, I now have it load the php script (that controls the light) in a separate frame.. but I want to get rid of this. So basically I want to create a link that will call the php in the background, but that link won't do anything to the page its on.
Any ideas?
Use a return false; in the click event:
Not Follow the Link
Explanation
The return value of an event handler determines whether or not the default browser behaviour should take place as well. In the case of clicking on links, this would be following the link, but the difference is most noticeable in form submit handlers, where you can cancel a form submission if the user has made a mistake entering the information.
The modern way of achieving this effect is to call event.preventDefault(), and this is specified in the DOM 2 Events specification.
You will need to use ajax to achieve such a behavior.
Links that don't do anything are basically HTML links where you bind the onclick event to a JavaScript function which returns false. This makes the links "do nothing" but still executes the JavaScript which tells the camera to go left/right.
HTML 5 let's you officially use anchor elements without a href attribute. But I would just bind a Javascript event listener to whatever element your already have. I'd even add these kind of interactive elements themselves to the DOM with Javascript, since they don't serve any purpose if a user has JS disabled.
...
will give you text that looks like a link.
If it's not really a link you may wish to consider a different kind of styling to emphasize the point and so that other underlined links show as links and this shows as something else. All depends on your needs and the situation.
I like jquery...
You will notice that the onclick function returns false. This is to stop the link from working...
<a onclick="do_it(this)" ...
then in your js
function do_it(anchor)
{
jQuery.ajax(
{
url : anchor.get_attribute('href'),
data : {whatever},
type : 'POST',
success : function(data)
{
alert('woo');
}
}
)
return false;
}
Pretty much what I'm doing here is:
So when the anchor is clicked jquery POSTs to the anchor's url. You can include data if you need to. This happens asynchronously so nothing happens on your page until jQuery gets response html(or whatever). If you want to do anything with the response you can get hold of it in the success function.
When the function returns it returns false, thus preventing the anchor from doing it's usual thing.
you talking about the javascript, create a onlick event / function and implement AJAX in specific DIV area
please check this out:
http://www.w3schools.com/ajax/ajax_examples.asp
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
//You need `ajax_info.txt` file with some content
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
You can use the following jquery solution:
HTML:
Move lights to left
JQUERY:
<script type="text/javascript">
$(document).ready(function() {
$('#link1').click(function(e) {
e.preventDefault();
$.ajax( $(this).attr('href') );
});
});
</script>
Can't believe no one has posted this yet. just use javascript void:
some click function
Its one of the oldest tricks in the book!
You need Ajax to retrieve datas from PHP without loading another page.
To "disable" the link:
Link
Or:
Link
Or just write a normal link and use jQuery (or another library) to add the event:
$('a').click(function(event) {
// the code with ajax
event.preventDefault();
});
As the title explains,
I need to disable pausing when clicked on the video viewing area, since i'm trying to attach other events when clicked on that area.
I tried using this videojs.com But found no solution
in video.dev.js (version 4.1) line 3399 comment function body
// OnClick - Toggle between play and pause
vjs.PlayToggle.prototype.onClick = function(){
/*if (this.player_.paused()) {
this.player_.play();
} else {
this.player_.pause();
}*/
};
in video.js line 80 column 403 its the same function , comment function body
function(){/*this.a.controls()&&(this.a.paused()?this.a.play():this.a.pause())*/}
The easiest way - just add this to css file:
.video-js.vjs-playing .vjs-tech {
pointer-events: none;
}
If you don't mind editing the videojs files directly you can either set the CSS for bigPlayButton to none instead of block, or comment out the following:
// Make a click on the video act as a play button
this.activateElement(this.video, "playToggle");
and this behaviour will be gone.
I wanted to comment on Ashot his answer for the solution on Video JS 4.6.3, but my reputation is not high enough yet.
MrHunter provided the answer for Video JS 4.3.
In version 4.6.3 the same code is on line 99 of the file video.js and looks like this:
function(a){0===a.button&&this.m().controls()&&(this.m().paused()?this.m().play():this.m().pause())};
After commented out it looks like this:
function(a){/*0===a.button&&this.m().controls()&&(this.m().paused()?this.m().play():this.m().pause())*/};
This worked perfectly for me. Thanks to Ashot and MrHunter for leading me to the solution on the newest version of Video JS!
If you want to prevent pause on click on the video,
Just add these 2 lines in the script.
var videoEle = document.getElementById("videoTagId");
videoEle.onpause = () => { videoEle.play(); }
I want a random sound to play on a click on a button on a web page. I have researched it quite a bit and this discussion has helped me most: http://www.elated.com/forums/topic/5196/
One poster recommended making a Javascript function to run whenever the button is clicked, as follows:
<script>
function playSound() {
var sounds = [
"http://www.mysite.com/1.wav",
"http://www.mysite.com/2.wav",
"http://www.mysite.com/3.wav"
];
**// Choose a random sound here and play it**
}
</script>
I understand the part about making an array of sounds. I think I have the part about selecting a random array element figured out. I am just stuck on how to play a sound inside the JS function as the poster recommends. Can I use an HTML5 audio tag inside the JS function?
I don't care whether the code for actually playing the file is inside or outside the function. Actually, I was first going to use JS just to randomly select an element, then have a line of HTML play the element of the array returned by the JS function. I gave up on that because I couldn't figure out how to specify that I wanted to play the return value of a JS function in HTML.
Thank you.
Use JavaScript to Add Sound
Place the following script in the <head> of your HTML document:
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("dummy").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
The Sound is Placed in an Empty Span
The JavaScript places an embed tag inside an empty span tag when the script is initiated. So, you need to add the following span file somewhere within the body of your HTML page, preferabl near the top of the document:
<span id="dummy"></span>
Call the Script with an onmouseover or onclick Attribute
The last thing you need to add is an element that you want to generate the sound on click or on mouseover. Call the script with one of those attributes:
Click here to hear a sound
<p onmouseover="playSound('URL to soundfile');">Mouse over this text to hear a sound</p>
If you have the ID of your audio element, you can do this :
document.getElementById(theId).play();
The audio element could look like this :
<audio id="someId">
<source src=sound/zbluejay.wav>
</audio>
And if you need it, you may add the audio element dynamically like this :
document.write("<audio id=someId><source src=yourURL</audio>");
document.getElementById('someId').play();
Fiddle here.
Haven't tested this one but I guess it should work. I basically select a random String from the array and put an embed-element into the div with the id "element" which then starts the sound.
<script>
function playSound() {
var sounds = new Array(
"http://www.mysite.com/1.wav",
"http://www.mysite.com/2.wav",
"http://www.mysite.com/3.wav"
);
$.("#element").html("<embed src=\""+Math.floor(Math.random()*(sounds.length+1))+"\" autostart=\"true\" />");
}
</script>
edited: i tested this one:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
function playSound() {
var sounds = new Array(
"file:///X:/test.mp3"
);
$("#element").html("<embed src=\""+sounds[Math.floor(Math.random()*(sounds.length+1))]+"\" hidden=\"true\" autostart=\"true\" />");
}
</script>
</head>
<body onload="javascript:playSound()">
<div id="element">
</div>
</body>
</html>