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>
Related
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'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>
I am working on an alphabets kid learning website, and want to play a sound on clicking an image. e.g. if user clicks on A(image) then in background sound of pronunciation of A must be played. Can it possible without using java script? Could anyone help?
Without JavaScript? I don't think so but the JavaScript is very easy.
You can play an audio element that you have put in your page withdocument.getElementById('audioTag').play();
So this should work:
<a onclick="document.getElementById('yourAudioTag').play();">
<img src="yourSrc.jpg">
</a>
JSFiddle.
You might even be able to put the onclick method into your image tag itself like so:
<img src="yourSrc.jpg" onclick="document.getElementById('yourAudioTag').play();">
You can then use the .pause() method to pause the audio and .load() if you would like to load some new audio. It works similar to the HTML5 video tag.
And if you don't want to use an element for the audio you can declare it like this:
var audio = new Audio('audio_file.mp3'); audio.play();
and use it the same way. Just instead of
document.getElementById('yourAudioTag').play();
you would use
audio.play();
An example of the whole thing would look something like this:
<a onclick="myAudioFunction('A');">
<img src="A.jpg">
</a>
<a onclick="myAudioFunction('B');">
<img src="B.jpg">
</a>
<script>
var aAudio = new Audio('a.mp3');
var bAudio = new Audio('b.mp3');
function myAudioFunction(letter) {
if(letter == 'a') {
aAudio.play();
} else if(letter == 'b') {
bAudio.play();
}
}
</script>
Interesting question.
Obviously, you should go for a JavaScript solution (like this post).
To quote css-tricks.com:
Again unfortunately, we can't tell an <audio> element what to do through CSS, so we'll need JavaScript.
However you have set up quite a nice challenge.
The <audio> element has the ability to show controls. In most browsers, the play button would come first from left in the controls.
Thus, if you wrap the appropriate <audio> element inside your letter element (<div>/<img>/ etc.), then, with a little absolute-positioning magic, and low opacity for the <audio>, you could put your letter "over the sound". So, when users click on the letter, they actually click on the play button.
If you use the browser's default controls, then you're browser dependent, as the controls dimensions do differ between browsers. However, you can create custom controls, or use players available in the market (like JPlayer), to have constant dimensions to fit to your letters.
Example and Demo:
The following code will make a click on the letter H play a sound of a horse, as long as you test it in a Chrome browser.
CSS:
div#lH {
position: absolute;
width: 30px;
height: 30px;
overflow: hidden;
z-index: 1;
font-size: 25px;
text-align:center;
}
audio#aH {
position: absolute;
top: -5px;
left: -5px;
z-index: 2;
opacity: 0.01;
}
HTML:
<div id="lH">
<audio controls id="aH">
<source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg">
<source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
H
</div>
Here's a JSFiddle.
I am using youtubes new iframe code to embed video but the videos seem to be lower quality than if I watch them on youtube. Is there a way to embed the high quality video?
My code at the moment is
<iframe title="YouTube video player" width="650" height="390" src="http://www.youtube.com/embed/6X3zUh8RqbY" frameborder="0" allowfullscreen></iframe>
&vq=hd720 or &vq=hd1080 did the trick where all else failed
The following code did the trick for me:
<iframe width="241" height="136" src="https://www.youtube.com/embed/NMG0CMkuUnA?version=3&vq=hd720" frameborder="0" allowfullscreen></iframe>
Try this for specific quality of video..
144p : &vq=tiny
240p : &vq=small
360p : &vq=medium
480p : &vq=large
720p : &vq=hd720
example :
<iframe width="320" height="350" src="http://www.youtube.com/embed/
HeQ39bLsoTI?autoplay=1&cc_load_policy=1&vq=tiny" frameborder="0"
allowfullscreen></iframe>
Also, it seems that YouTube now automatically serves up the quality that it thinks is optimized for the size of the embed, for iframe and AS3, regardless of whether or not the HD parameter is set.
See this post, and this for more information.
UPDATE: See Jason Renaud's answer for a good method that allows explicitly forcing the quality type. I tried it with an HTML5-embedded player, and it worked as expected.
It seems that the answer changes with time.
To look at the meta of what is going on, it seems that there are two generalities to the desired effect.
1) You can try and 'hack' the iframe code itself.
2) You can try and create a container to trick the iframe into thinking it should display HD.
Let's do both.
[ SPECIFIC IFRAME CODE]
You can possibly edit the typical embed youtube iframe link using current standards. I would recommend using a base size that would demand that size anyways and proceeding with step two to resize it.
Look up a current listing such as the one on h3xed to see the way youtube calls the files when embedded.
Of note, I didn't find the following code anywhere, I discovered it. I need to call videos that are 720. I was looking for the answer to this question and when viewing the file I noted that it said 720p60 as the actual youtube setting.
So I altered what seems to have worked before and sure enough...
<div class="responsive-container" >
<iframe width="780" height="480"
src="https://www.youtube.com/embed/DFzUdTUaAr4?rel=0&vq=hd720p60" frameborder="0" allowfullscreen></iframe>
</div>
worked.
Note that essentially I added ?rel=0&vq=hd720p60
And made the iframe size large enough to demand hd.
[ CREATING A CONTAINER ]
This works because you are asking youtube for a higher quality video and then going behind it's back and resizing it to fit the space you desire. Although you directly ask how to embed, I'm assuming you're asking to embed whenever and wherever you want - not being restricted to giant videos on page for high quality files.
A simple responsive container works well since iframes are made to be controlled through CSS. Using code similar to that found on thenewcode's Force-Embedded-Youtube-Videos-To-Play-In-HD article we create a code that restricts the aspect ratio to a limited size.
.responsive-container {
position: relative;
padding-bottom: 53.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.responsive-container,
.responsive-container iframe {
max-width: 1280px;
max-height: 720px;
}
.responsive-container iframe {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
*Of note: 'Legacy' code of &fmt=35, &fmt=22, or &fmt=37 works at this point for video links. The youtube video opens up at this specific quality.
Also note that you also have to notice a difference in tdl between youtube videos and embedded videos. They are (from my experience) not cross compatible. * (youtube.com/embeded... VS youtu.be/...)
Oh I've found it now you have to put ?vq=hd720 on the end of the url like so:
<iframe title="YouTube video player" width="650" height="390" src="http://www.youtube.com/embed/6X3zUh8RqbY?vq=hd720" frameborder="0" allowfullscreen></iframe>
<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.