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.
Related
So I have a chatting website with some friends and I'm trying to add a radio player widget to login page. But when I try adding the code and click save button, "iframe" and "document" gets removed automatically. I'm totally new to coding and stuff so I have no idea how to add a radio player widget without using inline frame. Here's the code I'm using. Please pardon my noobiness hehe.
<div class="radyoTelekomFooterDIV">
<div radyotelekom="radyoplayer-v6">
<script type="application/javascript" src="//radyoplayer.net/players/v6/player.js?v=0.6.0.0"
charset="UTF-8"></script>
</div>
</div>
<audio controls>
<source src="path-to-audio-file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Above is an example of HTML5 audio player code, check if this help you.
Replace "path-to-audio-file.mp3" with the URL or path to the audio file you want to play.
HTML5 audio player does not require an iframe.
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.
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).
If I have an html5 audio element with multiple sources, is there a way I can specify which source should be used when the user wants to download the file vs playing it in the browser (or achieve a similar effect with javascript)? For example, if I have two files, test_file.opus and test_file.mp3, can I signal the browser to play the opus file when the user clicks play, but then to download the mp3 file when they right click and select "save audio as". Typically opus audio files can be smaller, but they can't be played very easily unless the user knows what they're doing.
<audio controls preload="metadata">
<source src="test_file.opus" type="audio/ogg; codecs=opus">
<source src="test_file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Quick Note: I realize I could provide a download link in an <a> tag next to the html5 audio element. I was just curious if there was a way to signal the browser which one should be downloaded vs played in the browser or if there was a way to achieve a similar effect using javascript.
I have following problem. I have embedded video on my page:
<video id="video_1" width="520" height="360" controls="controls">
<source src="http://patho/to/video.mp4" type="video/mp4" />
</video>
When i open my page i see black box. After 4-5sec play icon is being displayed.
Is it possible to see this play icon immediately ? I tried to do a progress bar or something and checked all media events -> http://dev.w3.org/html5/spec/single-page.html#mediaevents .
But it looks like this problem is not connected with my video but with quick time which need time to be loaded. Am i right ? Or there is a workaround for this ?
One thing i can do is to initialize video earlier and then just show it via js ...
Take a look at this document about preloading? If your file is huge sized, then nothing could be done.
PS: IOS has own way of playing html5 video, is hardware accelerated and displayed above browser by system hack. That's why I think there is nothing that could be done.
what you can do is use the poster setting of the video tag:
<video poster="http://link.to/poster.png">
<source ... />
</video>
this should lead to the image being displayed immediately after download of it,
then download the play button once the player and the vid are loaded.
have fun,
jascha
It sounds like the index is at the end of the file: How to get your HTML5 MP4 video file to play before being fully downloaded.