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>
Related
Goal:
I am trying to implement a control with as little code clutter as possible that will allow the change of quality of a video.
Preferences:
The following is what I am given, and I would rather work around it. I am open to using pre-built plugins or a javascript/jquery hack, but would rather not go for a solution that involves reinventing (me or you) the wheel (require the building of a custom video control scheme), but would take it as a last result.
EDIT:
Sorry. Did not mean to have that correlation, as the urls did not reflect any sort of pattern. I oversimplified it, not assuming people would look at the urls for a pattern. But thank you for that start, as I can probably work with that. Sorry again. I will change the urls to not have any pattern.
<video controls preload>
<source label="fullHD" src="http://v.com/lorem.mp4" type="video/mp4">
<source label="720p" src="http://v.com/ipsum.mp4" type="video/mp4" >
<source label="360p" src="http://v.com/dolor.mp4" type="video/mp4">
</video>
Thank you in advance for anybody who can give some insight.
Sorry for asking. Turns out I was able to solve it pretty much all by myself. Hate those moments. Here is the solution I came up with, which just involves copying the <source> I need based on the label attribute, deleting it, and prepending it into the <video> element:
HTML
<div class='vidcontainer'>
<select class='qualitypick' autocomplete='off'>
<option selected>fullHD</option>
<option>720p</option>
<option>360p</option>
</select>
<video controls preload>
<source label="fullHD" src="http://v.com/lorem.mp4" type="video/mp4">
<source label="720p" src="http://v.com/ipsum.mp4" type="video/mp4" >
<source label="360p" src="http://v.com/dolor.mp4" type="video/mp4">
</video>
</div>
JQUERY
$(document).ready(function(){
$('.qualitypick').change(function(){
//Have several videos in file, so have to navigate directly
video = $(this).parent().find("video");
//Need access to DOM element for some functionality
videoDOM = video.get(0);
curtime = videoDOM.currentTime; //Get Current Time of Video
source = video.find("source[label=" + $(this).textContent + "]"); //Copy Source
source.remove(); //Remove the source from select
video.prepend(source); //Prepend source on top of options
video.load(); //Reload Video
videoDOM.currentTime = curtime; //Continue from video's stop
videoDOM.play(); //Resume video
})
})
Although this was not my intention, I hope my answer is of some use. Sorry again for asking before thinking it through.
You don't need many source tags. One is enough, however, you need to change the value of the source attribute, which is src.
var map={'fullHD':'1080p','720p':'720p','360p':'360p'};
function changeQ(quality){
$('source','video#player').attr('src','http://v.com/'+map[quality]);
$('span#pp').html(map[quality]);
console.log($('source','video#player').attr('src'))
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Quality
(<span id="pp"></span>)</button>
<ul class="dropdown-menu">
<li>FullHD</li>
<li>720p</li>
<li>360p</li>
</ul>
</div>
<video id="player" width="400" controls>
<source src="http://v.com/1080p" type="video/mp4">
</video>
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();
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?
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>
<div id="div1" style="position: absolute; top: 0px; left: 0px;">
<video width="320" height="240" controls="controls">
<source src="C:\Users\Trent Terrill\Desktop\Website Stuff\Media\video.ogg" type="video/ogg"/>
Your browser does not support the video tag.
</video>
</div>
It won't work in any browser.
First, ...
The controls attribute is a boolean attribute. If present, it indicates that the author has not provided a scripted controller and would like the user agent to provide its own set of controls.
(See http://www.w3.org/TR/html5/video.html#attr-media-controls)
Second ...
Using a "Windows-style" path like
src="C:\Users\Trent Terrill\Desktop\Website Stuff\Media\video.ogg"
could be a problem for the browser. Try to setup a local webserver (e.g. Apache) and convert your path to a URL.