I have an mp3 file saved in my assets/audio folder and want to play it using the html 5 player. However, when I load my page I always get a 404 not found error for that resource. Wondering if I am doing this wrong.
In view.html.erb
<audio src="app/assets/audio/bensound-acousticbreeze.mp3" type="audio/mpeg" controls>
Your browser does not support the audio element.
</audio>
I have verified multiple times that the full path is correct. Any help would be appreciated
UPDATE:
Found this while looking up a few things to answer the question. Better than any other solution here is to use the built-in audio_tag. This does remove the alternate text option though, so there's that. Still, here's the doc page.
Have your tried audio_path or asset_path?
That would look like this:
<audio src="<%= audio_path 'audio/bensound-acousticbreeze.mp3'%>" type="audio/mpeg" controls>
Your browser does not support the audio element.
</audio>
or
<audio src="<%= asset_path 'audio/bensound-acousticbreeze.mp3'%>" type="audio/mpeg" controls>
Your browser does not support the audio element.
</audio>
You should simplify by keeping your audio in the audios dir as seen in the docs. Then it would just be:
audio_path "bensound-acousticbreeze.mp3"
All together with the html:
<audio src="<%= audio_path 'bensound-acousticbreeze.mp3'%>" type="audio/mpeg" controls>
Your browser does not support the audio element.
</audio>
Apparently all rails assets get collapsed down into the assets directory, even if they are in sub-directories. The correct path was just "assets/bensound-acousticbreeze.mp3."
To anyone having trouble like this, it helped me to compare the path of the missing asset with the one I wanted to load to see what the difference was.
Related
Only certain video files in tag are played on a white screen.
Other files with the same extension work well.
It plays when you convert the file to another extension. (ex. mov -> mp4)
<video controls autoPlay width="100%" height="100%">
<source src={videoUrl} />
</video>
I think it has something to do with the HEVC codec.
my electron version 18.0.4
Add meta to html
http-equiv="Content-Security-Policy" content="media-src *;">
The video url works well if you do it on Chrome.
I share my solution.
Just a chromium version problem.
update v100 -> v110
Make sure electron >= 22 (chromium 107 add hevc hw decoding support) will solve your problem.
I have a very similar question to Play a Shoutcast Stream on iPhone with HTML5, but with a few differences...
I have an Icecast server running on Ubuntu 14.04 LTS, streaming an mp3. The setup follows Icecast's documentation exactly, is linked from an <audio> HTML5 tag on a website running on AWS EC2 and works in my desktop / laptop browser.
However, when I try to load the same website in iOS, on either my iPhone or my iPad, the HTML5 audio player loads, shows "Loading..." for several minutes, then either displays nothing or "Error".
The HTML5 code is as follows:
<audio controls>
<source src="http://xx.xx.xx.xx:8000/example1.mp3" type="audio/mpeg" />
</audio>
Suggestions or ideas as to why this doesn't work in iOS?
I finally got this resolved, but realized I never posted an answer.
I had to set the <audio> src value to the streaming mount point found in my icecast.xml file.
So, in my icecast.xml file, I have:
<!-- You may have multiple <listener> elements -->
<listen-socket>
<port>8000</port>
<bind-address>123.456.789.012</bind-address>
<shoutcast-mount>/stream</shoutcast-mount>
</listen-socket>
Thus, my HTML5 <audio> tag became:
For good measure, I also included the mime_type of audio/mpeg and controls to the <audio> tag, though these are not required.
I am trying to embed a local mp4 file that resides on the same server where IIS runs but on a different disk and is not part of the site (too many videos to do that). For example, my site is under C:\inetpub\wwwroot\Site while mp4 files I'd like to play are under D:\Videos. User running the site has access to this location. When I put full path to the file in the source, video does not play. What is the best way to handle this?
<video width="640" height="360" controls="controls">
<source src="D:/Videos/VideoFile.mp4" type="video/mp4" />
</video>
You don't have the right to do that, you need virtual path and not a physical one just put mp4 file inside your project directory and then specify path as...
Try using 'http://[Your server]/directory/yourmp4.mp4' or use Server.MapPath() as src of your object.
and make sure your browser supports video tag as it is a html5 tag.
I have tried everything I possibly could, but I was not able to solve this. I am trying to display an mp4 video using an HTML5 video element in IE9 and IE10. In IE9 I get a blank square where the video is supposed to show and in IE10 it says "Invalid Source". It plays fine in Chrome.
The video displays fine within a simple HTML file, but not in my ASP.net MVC project, whether run locally or on a web server. I have the file placed in my root folder (same folder as the web.config)
Here is my code in my ASP.NET MVC index.cshtml:
<video controls style="position:inherit" >
<source src="ExplainerVideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
Any ideas?
Thanks.
Try taking away the codec and letting the browser decide for itself whether it can play it or not.
e.g. <source src="ExplainerVideo.mp4" type='video/mp4' />
Failing that, try an absolute URL for the video as I've noticed this causing issues on IE before.
I am trying load a YouTube video into a HTML 5 tag.
The problem I am having is I do not know what the “src” property should be. Using the URL for a video on YouTube does not seem to work, that URL seems to retrieve an entire page rather than just a video file.
I have been able to copy and paste YouTube’s own tag (by viewing the page source), that they use on their pages, but this is not a very efficient or long term solution. Is there a better solution?
I have tried to use YouTube’s API, but no matter what I do, it seems always to pull in the flash player version of the player (which of course won’t work for iOS.) Am I missing something obvious here?
This blog post might help: http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html
The suggestion is to use this code:
<iframe class="youtube-player" type="text/html" width="640" height="385"
src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">
</iframe>
The iframe will autodetect HTML5 capabilities and use them; if not, it uses Flash as fallback.