Volume control does not show with <audio> tag;
CODE:
<audio controls>
<source src="music/My_Love_Song_Forever.mp3" type="audio/mp3">
<br><a href='http://www.apple.com/quicktime/download/' title='Get Quicktime' onclick='window.open(this.href); return false'>Install Quicktime<\/a> to enjoy this beautiful! Love Song!
</audio>
PICTURE:
BTW, if this were a .mov file, the controls do show a volume adjust. NOT with .mp3 files.
Found this goodie about 10 minutes later ... nevertheless, I thought the answer may be of use to someone else as well.
Reference:
https://github.com/senchalabs/jQTouch/issues/499
BTW, here is their magic potion:
audio {
display: block;
width: 300px;
margin: 20px;
}
Why can't the powers to be just
add these parts to the list?
Related
I have this code inside
and I have the .css the class myvideo (It doesn't need this code ),it is the design.
What I want to know is ,how can I do pause and unpause this video.I try to stop my video and I didn't manage it.If you could help me with it I will be greatful.Thanks
<div class="myvideo" style="left: 6px; top: 0px">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
<source src="exr.mp4" type="video/mp4">
</video>
If you want to have control over a video element you must use JavaScript to control it. Here's a great example of how to control a video object from JavaScript: https://www.w3schools.com/tags/av_met_pause.asp
You may need to add another HTML element to control your video. This element must listen to a click event. After that, you will be able to do what you want with the video.
const videoEl = document.getElementById("video-bg-elem");
// Will play the video
videoEl.play();
// Will pause the video
videoEl.pause();
I've tried this:
<div class="music8">
<audio controls>
<source src="http://mcclures.tech/ect/song.mp3">
<source src="http://mcclures.tech/ect/shatterme.mp3">
</audio>
</div>
And CSS
.music8 {
position: fixed
bottom: 0
}
Doesn't seem to work. What am I doing wrong?
First you are missing some endings to your css statements after you state an elements attribute in css you end it with a semi-colon. Second it is best practice to specify a left or right along with your bottom position. So it would look something like the following:
Here is a fiddle to show you Fiddle Demo
.music8 {
position: fixed;
bottom: 0;
left:0;
}
I think you want to define multiple mp3 file for one audio player. you can not do it. you will have to define one src for at a time for audio elements and if you want to change it then fetch the file path from somewhere like array and change the src by jabascript or jquery.
do something like this-- and give one src at a time.
<audio controls>
<source src="http://mcclures.tech/ect/song.mp3" type="audio/mpeg">
</audio>
This question already exists:
I can click play, but no video plays
Closed 6 years ago.
I have this video:
<video src='videos/StressedOut.mp4' class='prize_video' controls></video>
I've checked, the URL is working. .prize_video doesn't affect the function of the video, only the style:
.prize_video {
width: 800px;
height: 480px;
position: relative;
left: 22px;
}
I can click play, but the video won't start...
check the direct link of the video file in the web browser, could be the file permissions.
or could be an unsupported format such as HEVC
As suggested by #David please check the video file permissions since I ran the html and css here with different video and it works fine.
HTML:
<video src='http://www.w3schools.com/html/mov_bbb.mp4' class='prize_video' controls></video>
CSS:
.prize_video {
width: 800px;
height: 480px;
position: relative;
left: 22px;
}
Also verify following:
Correct file name
File format(any variation of mp4?)
Relative file location
P.S. It can be something very trivial causing problem too.
try adding the mime type as an attribute in the video tag, to select the correct video codec by the web browser.
<video src='videos/StressedOut.mp4' type="video/mp4" class='prize_video' controls></video>
basically what I am trying to achieve is this audio player in HTML play the audio and the video when the play button is clicked and vise versa for pause. This is my code.
<div style="text-align:center">
<img src="img/playpause.jpg" onclick="playPause()">
<br>
<video id="video1" width="1200" >
<source src="pjds.mp4" type="video/mp4">
<source src="pjds.ogg" type="video/ogg">
Oops, your browser doesn't support me :(
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>
<audio controls>
<source src="ay.ogg" type="audio/ogg" onclick="playPause()">
<source src="ay.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Any help is greatly appreciated, thanks.
It's best described by example: http://jsbin.com/zivak/1/edit
I set up a video tag and an audio tag, and a button with onClick-binding. For educational purposes I left the controls visible, but they should be hidden as they will tamper with your state.
Upon clicking the button the elements are retrieved from the DOM and then play()ed, if paused, and pause(), otherwise.
Keep in mind that onClick is one-way, so to speak...
UPDATE: Yes, that is possible, although it will get complicated since both tags might have to buffer indepentently, and you have to take care to synchronize that. It's by no means easy... but is http://jsbin.com/zivak/4/edit how you thought about it?
UPDATE: If you mean "mute the audio, leave the video on", then no. If you mean "mute the audio, mute the video", yes, this is actually quite easy: http://jsbin.com/zivak/5/edit .
try this:
var myVideo = document.querySelector("video1");
if (myVideo.get(0).paused) {
myVideo.get(0).play();
}
else {
myVideo.get(0).pause();
}
I was wondering if it's possible to set the width of the audio tag. It is not a supported feature by default, so "hacks" will be happily accepted.
I already tried putting them in small div's and tables, but that doesn't look very smooth... As far as I can see, I'm the only one bothering about it, but I really appreciate some help
There is no need for cross-platform/browser support; I'm happy as long as FireFox (3.6 ++) supports it.
Quick example as to what I'll be using:
<audio preload="auto" id="id12" controls="controls" onended="func12();" src="http://192.168.1.68/mymusic.wav"></audio>
Set it the same way you'd set the width of any other HTML element, with CSS:
audio { width: 200px; }
Note that audio is an inline element by default in Firefox, so you might also want to set it to display: block. Here's an example.
For those looking for an inline example, here is one:
<audio controls style="width: 200px;">
<source src="http://somewhere.mp3" type="audio/mpeg">
</audio>
It doesn't seem to respect a "height" setting, at least not awesomely. But you can always "customize" the controls but creating your own controls (instead of using the built-in ones) or using somebody's widget that similarly creates its own :)
You also can set the width of a audio tag by JavaScript:
audio = document.getElementById('audio-id');
audio.style.width = '200px';
You can use html and be a boss with simple things :
<embed src="music.mp3" width="3000" height="200" controls>