Rails blob url safari not playing the audio file
Hi I am trying to build a basic app for meditation, I have the show page working and it is grabbing the corresponding. audio files from the model. It works well in chrome but I have just tested it in safari and the audio does not play. the player just sits there when I click play.
#show page
<% if #meditation.audio_file.attached? %>
<div >
<audio controls>
<source src="<%= rails_blob_url(#meditation.audio_file) %>" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>
<% end %>
I have checked dev tools and it is pulling the right URL and file and if I copy and paste the url via dev tools it downloads the audio file.
I have also turned off turbo to test and the same problem occurs.
Hope someone can help, thanks
Related
Instead of using true gifs, we are using mp4 videos that loop (in order to save load time)
However, Safari is refusing to autoplay the videos, even with autoplay loop muted playsinline.
Is there a way to create looping videos/gifs that do not require large file sizes and can autoplay in mobile
My video tags look like:
<video preload autoplay="autoplay" muted="true" playsinline="true" loop>
<source src= 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4'>
Your browser does not support video tag
</video>
Have also tried:
<video preload autoplay muted playsinline loop>
<source src= 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4'>
Your browser does not support video tag
</video>
In some cases I want the gif to start when a user scrolls to a specific point. So I use:
if (/* user scrolls to div */){
document.getElementById('my-video').play();
}
Is there a way to have videos autoplay in Safari, or any best practice alternatives?
Your HTML5 actually works fine with a different source video - the following runs in Safari 12.1.1 on Mac OSX 10.14.5:
<video preload autoplay="autoplay" muted="true" playsinline="true" loop>
<source src= 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4'>
Your browser does not support video tag
</video>
It may be that there was be an issue with the video source you were using or the network or server it is on - for example, it is very slow loading and won't play in Chrome or Safari when I test it directly.
If you are seeing the same issue with another video, it may be that there is a format issue or that there is some server to safari indication issue which have been seen previously, although the root cause is not clear at this time: Safari 9.0 can not play mp4 video on the storage server
Either way, there is nothing obvious wrong with your original HTML5 above.
For iOS, there are specific auto play rules - at the time of writing these are the most recent AFAIK (https://webkit.org/blog/6784/new-video-policies-for-ios/):
By default, WebKit will have the following policies:
I want to play video file in my application, so I write below code for the same
<video width="640" id="videoPlayer" style="background:black" autoplay controls>
<source src="/cam01/2017-11-07_17-04-25.mp4" type="video/mp4">
<p>Your browser does not support the video tag.</p>
</video>
The cam01 folder is in Tomcat's webapp directory (/apache-tomcat-7.0.70/webapps/cam01), but I'm getting following error in console log
Even when I'm trying to hit url http://localhost:8080/cam01/2017-11-07_17-04-25.mp4 directly on browser to see video, I'm getting following error...
Here is how you can play videos on a page from the local directory or remote directory:
<video src="[ YOUR VIDEO ].mp4"
controls
width="720" height="480">
Your browser does not support the video element, please #D try downloading the video instead
</video>
Please check the compatibility of the browser that your trying to test playing in through:
https://caniuse.com/#search=video
The current state of support for the element is below:
It is also preferred if you could play webm format instead of mp4.
If it still does not work make sure you have flash installed.
https://get.adobe.com/flashplayer/
I have the following basic video tag in a page:
<video src="media/pop.mp4" width="698" height="392" preload="none" controls autoplay>
This is a cshtml page in a MVC4 web app. When I build and run using localhost in IE10 it works - the video plays.
When I publish to the website, the video gives me an 'invalid source' error in IE10 and doesn't play. It plays fine in Chrome from the website.
Where would IE be looking for the file given that it plays fine in Chrome?
You should check what mimetype the webserver is trying to use when serving .mp4 files. Perhaps chrome ignores it, while IE 10 requires the correct mimetype.
I use HTML5 to play mp3 file on iPad.
I put two audio tags:
One use audio source from
http://www.schillmania.com/projects/soundmanager2/demo/_mp3/office_lobby.mp3
The other is from my local nginx server, the mp3 file is download
from
http://www.schillmania.com/projects/soundmanager2/demo/_mp3/office_lobby.mp3
After I click play button on audio player controls, both of them can play.
The remote one can playback; but mp3 from my local nginx can't playback, it always shows 'streaming...' even after the mp3 playing is done.
The HTML5 code is below:
<p>Remote</p>
<audio controls="controls">
<source src="http://www.schillmania.com/projects/soundmanager2/demo/_mp3/office_lobby.mp3" type="audio/mpeg" />
Audio not support!
</audio>
<p>Local Nginx</p>
<audio controls="controls">
<source src="http://192.168.1.100/office_lobby.mp3" type="audio/mpeg" />
Audio not support!
</audio>
I want to know why two audio controls behave diffrently.
Is it nginx configuration problem?
Similar problems happened for me too.
You may check the audio URL directly in the browser. If you meet "403 Forbidden" issue, that means your local mp3 has wrong permission.
Hope it's helpful.
I'm trying to have a .m4v file play as a failover since IOS still won't allow Flash. I can play the .m4v file on Windows through a few browsers, but even if I go directly to the .m4v file on my server from an iPad it won't play. All I see is a black screen.
I have the debug console open and I don't receive any messages or see any content.
I deployed the .m4v file on my personal web server and can play it from there. The MIME type is correctly set.
This is the MIME type:
.m4v = video/x-m4v
What else could be wrongly set?
Here is an example of my HTML:
<video id="movie" width="320" height="240" preload controls>
<source src="/SurroundHealth/videos/sample_ipod.m4v" />
</object>
<div class="fallback">
<p>You must have an HTML5 capable browser.</p>
</div>
</video>
Here is the url:
http://dev.surroundhealth.net/surroundhealth/videos/test.html
Modify the MIME type to read application/octet-stream instead of video/mp4 - worked for me!
I think your mime type is incorrect and it should be:
.m4v = video/mp4
References:
http://en.wikipedia.org/wiki/MPEG-4_Part_14
Never figured this out, so we put the video on youtube