I want to display an image with an audio attachment like an mp3 file. What's the best way to make this work in html5?
Something as simple as this?
<img src="some_image.jpg" />
<audio controls
src="some_audio.mp3">
Your browser does not support the <code>audio</code> element.
</audio>
This will display whatever image with an audio track underneath. If you'd like some sort of dynamic interaction with the img+audio you will need to use javascript. I can give an example if that's the case.
Related
We all know that to play a video on a web page in the most basic way you would use something similar to this html code
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
However, while snooping around in the inspection feature on a number of different websites and having a look at the tags inside elements, i cant help but notice that some video platforms at times appear to just use a <div></div>.
Heres two examples
youtube:
If you inspect any video page on Youtube and then right click the video and inspect the html you will see <video></video> tag however if you click on the video tag (to initiate the hover state) and the click fullscreen you will see that the video tag seems to disappear and become a div. Here is the link to a youtube video page if you want have a look yourself https://www.youtube.com/watch?v=-h0MaGc7nx0.
Twitch:
If you go on a twitch video page they don't seem to use <video></video> tags at all, they use <div></div> tags. Initially i thought it was because they do live videos so things work a bit differently but if you have a look at live facebook gaming videos you will notice its the use the conventional <video></video> tags. Here is the link to a twitch video page so that you can have a look yourself https://www.twitch.tv/videos/368024918. Here is a link to facebooks gaming page so that you guys can also have a look and compare https://www.facebook.com/gaming/?external_ref=games_video_bookmark.
This sparks my curiosity conciderably. How do they do that? And why would a programmer or company choose this way over the conventional method?
All the examples you gave use the video tag behind the controls. When you inspect it, you see a div with controls, but if you'll dig deeper (or above) you'll see the video hiding.
They make it that way to have more control on the styling of the player and it's controls. Instead of using the default buttons, you can see buttons for pause, play, mute, etc, that onclick uses the video api. That also allows them to pause the video on click anywhere, or to add the cards on the last few seconds on a YouTube video.
There is a way to play a video without the video tag, using old school flash (that's how websites played video before html5) or canvas, by drawing frame after frame (even using canvas, most of the time there is a video tag to get the frames to draw).
I want to have users be able to click a link to play audio on my website, but I don't want there to be an actual 'player', per se, on the page. Is there a way to make a link play an audio file? I do not want to go to an actual file. I simply want to play that audio in the "background" of the current page.
I have tried this:
<audio>
<source src="My Audio.wav" type="audio/wav">
</audio>
However, that doesn't even show anything at all. What do I need to do?
<audio id="player" src="My Audio.wav"></audio>
<div>
Play
</div>
By doing that, the href="#" will link to that exact same page, and when clicked, the onclick event will play the audio.
Just a note, it is not a bad idea to have a couple of different file formats. That will assist in cross-browser compatibilities.
I am using below code to display the audio in the browser
<audio controls="controls" id="audio" width="300" height="300" src="<?='audios/remix.mp3'?>" > </audio>
The height of the audio tag is not adjusting correctly, can anyone tell me how to increase the height of the audio tag.
You can use style="height: 300px;", however, in Firefox, this just renders as a large blank space above the controls. (However, clicking in the space makes the audio play, as would be expected.)
There is not such attribute for the audio tag.
It is not possible to style an HTML5 <audio>.
But it has a few events that you can run functions off of and a source tag which contains the path to the song you want to play along with the type of the song.
<audio id="song" width="300" height="32" ontimeupdate="updateTime()"><source src="path/to/music.mp3" type="audio/mp3" /></audio>
Your browser does not support the audio tag.
You may use JavaScript + CSS to do a workaround.
Here is a tutorial on How To Style the HTML 5 Audio Player
I do not think there is a tag height for that. You may want to double check this quick html5 audio reference:
https://bytutorial.com/tutorials/html5/html5-audio-control
I want a short movie clip to play when visitors arrive at my site. I want the video area to show up without movie controls, and without any kind of border frame, so that it just looks like a moving picture. What's the best way to do that?
I'm not overly concerned with browser support. I don't want to use Flash.
Thanks.
You can easily do this with the HTML5 video element and a little bit of javascript. You can embed the video into the page using:
<video id="video">
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
Just replace the src and type with your information.
As for the Javascript, you can use the following:
var video = document.getElementById("video");
video.removeAttribute("controls");
This is, of course, assuming your video element's ID is "video".
I am using video tags and jQuery to display a HTML5 video playback.
How can I show an image while the video is still loading for displaying?
I would use jQuery for this..
Thanks in advance!
PD: Display an image when the video preloads.
There is no need for JQuery to achieve this as the html5 video tag comes with its own poster attribute. You can use that to specify what image should be displayed while the video loads. For instance if you have an image called myImage.jpg you can do the following: <video controls="controls" poster="myImage.jpg">. Refer here for more info:
https://www.w3.org/wiki/HTML/Elements/video#HTML_Attributes