I am making a website using only HTML and CSS. I am trying to link to an online mp3 file (that I do not own) so that the mp3 plays in the browser. This simple code does what I want on Firefox and Safari:
<a href="https://www.allaboutbirds.org/guide/assets/sound/548271.mp3" >
However, instead of playing the mp3, Chrome automatically downloads the mp3 file to my computer. Is there some way I can alter my HTML code (not my browser preferences) to stop this from happening? Thanks.
You can't guarantee that all the browsers will have a built-in in-frame player for the audio file.
The best thing to do in this case is to embed the audio player into a page with the audio element:
<audio src="https://example.com/some-sound.mp3" controls></audio>
Related
My hosting doesn't allow me to upload mp3 or any audio files, so is there any way I can link audio in some other way? I know we can embed soundcloud and stuff but just wondering if there was any other alternative.
I’ve found this very useful guide that covers some alternatives:
Linking to a sound file using a href allows a browser to open and play
an audio file if the viewer of your web page has properly configured
their Internet browser. You can also use the tag or the newer
tag to insert a sound file directly into a web page.
<a href> tag
<a href="https://www.computerhope.com/jargon/m/example.mp3">Play sound
file</a>
<audio> tag
The tag can create a media player as part of the web page. It allows the visitor to play, stop, pause, or download an audio file. The element is compatible with all modern web browsers.
<audio controls>
<source src="https://www.computerhope.com/jargon/m/example.mp3" />
</audio>
<embed> tag
An older method of including audio files is to use the tag. While this method certainly works, it is less efficient than those which were mentioned above. As such, we recommend using one of the solutions demonstrated above.
<embed src="https://www.computerhope.com/jargon/m/example.mp3">
I figured the best way to do it without uploading your audio/music, BASE64 ENCODING!!
Very easy, kinda messy and supposed to be used for images I guess but works fine with audios and should work with videos as well (haven't tried videos)
Here a base64 encoder: https://omatsuri.app/b64-encoding
WARNING THOUGH! IT MIGHT GET LAGGY & MESSY
I have a code containing real media player video and audio files. (.rm and .ram). They are not working in browsers. Can you please suggest a solution. The code contains an embed tag which has a .rpm file in src. The .rpm file contains path to a .smi file which contains the .rm video and audio files to be played on clicking a button in browser. But this is not working as it should.
Thanks.
Convert the RealMedia files to a modern format, such as MP3 for audio files, or MPEG4 for video files.
RealMedia has been effectively obsolete for the last five to ten years (depending on how you define "obsolete"), and is no longer playable in any modern web browser.
I'm currently working on building a website that has full page videos as backgrounds. The plan is to make a play button on top of the video that allows the user to watch the full-length piece with sound (embedded from Vimeo). I am running FullPage.js by Alvaro Trigo.
I am converting my video using VLC player from an Apple ProRes .MOV file. I create two web versions, an mp4 (h.264) for safari and a webm (vP8) for Chrome/Firefox.
For some reason I cant get the WebM video file to work in Firefox. It loads just fine in Chrome. When I try to open the file (from the server) it says "Video cannot be played because the file is corrupt".
I set up the MIME files on my server (I use BlueHost) and the content type says it is a video/webm but still no luck. Is this a Firefox issue or am I doing something wrong? Thanks.
video link
I'm trying to include a HTML5 video player on a site.
I've got the following code:
<video id="player" controls="controls" width="100%">
<source src="http://trailers.apple.com/movies/paramount/captainamerica/captainamerica-tlr1_h.480.mov">
</video>
This works in Safari, but not in Chrome and Firefox, is the .mov encoded in a weird way that doesn't allow them to be used like this? trailers.apple.com which uses the same URLs work fine in their player.
The probability that on apple's site they have multiple links to different encoded movie files. They do this because there is no current movie format that works across all major browsers.
Also just because the URL is the same doesn't mean that the same video is being served up on apples website... They could be doing some URL mapping magic to get a correct video format.
look at this link for a good current table of support per codec
http://diveintohtml5.info/video.html#what-works
Apple only serves up their videos in the MOV format. This means that only Safari can watch the videos since it is the only browser that uses Quicktime in its HTML5 video implementation. If you try opening the file directly in Chrome you should either see it download or the Quicktime plugin kick off.
I personally don't have Quicktime so when I go to the Apple trailers site, I get a link to download Quicktime and can't proceed any further without doing so.
captainamerica-tlr1_h.480.mov is just a .mov file that redirects to captainamerica-tlr1_h480.mov But it still won't work in browsers that doesn't use Quicktime for <video>. You have to set User-Agent to "Quicktime" for trailers.apple.com.
other browsers doesn't understand .mov, quicktime does. you need to serve up separate files for safari. you can generate needed files with nero or in-browse via media.io.
i want to embed video file in my html file and that video file is saved in same folder where my html page is saved?so how can i embed that video?
I would advise using HTML5 to do this:
<video src="myvideo.avi"/>
This will work for Firefox 3.0+, Chrome and Safari. Not sure about the early IE (Internet Explorers). It also avoids having to use Flash to render a video window.
W3C Schools has a good article on the use of the video tag
W3schools has a great reference on the <video> tag here:http://www.w3schools.com/html/html5_video.asp
Another solution is to upload your videos to youtube and then embed the video on your site. It takes less server space on your part, it is widely supported, and you can get discovered easier.