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.
Related
At work we given a link to a video in our network to use for HTML5 video streaming that plays an mp4 video. Is there a way to add a string to that link that will loop the video or refresh the link at video's end. Below is a made up link but if that were real, can any extension be added to that that would work? Additionally, is having the video open muted or unmuted an option to add to the link as well or are these options something that have to be done in code through JavaScript or something like that?
https://www.examplelink.com/video/stream/12345.mp4
Thanks !
you can use the loop feature,
<video src="https://www.examplelink.com/video/stream/12345.mp4" type="video/mp4" autoplay loop> </video>
If you want to see an example of documentation, click here.
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 work on a testing website that allow users to upload audio and video. In local server, everything is fine. The users can upload audio and video and play audio or video as they want. But after deploying the website to windows azure, the video does not work. The users in the azure server can upload audio and video, but they can only play audio. When trying to play video, an error message say (NO video with supported format and MIME type found).
In html, I use these to display video
<video id="Video" controls="controls">
<source src="#Url.Content("~/Video/"+VideName)" type="video/mp4" />
Your browser does not support HTML5 video.
</video>
I check the server to see if the video files are exist, but the files are exist there.
What is the problem ? Does azure refuse the request for video ?
Probably Azure does not recognize your deployed video files as static content. Try to add the following lines in your web.config file:
<staticContent>
<remove fileExtension=".mp4" />
<mimeMap fileExtension=".mp4" mimeType="video/mp4" />
</staticContent>
It should be placed in system.webServer section.
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