I have an issue with playing my html5 videos on iOS devices, namely iPhone 7.0 and iPad 7.0.4 currently the iPad is showing just the empty container and on iPhone it has the play button with a line through it. What could this mean?
I've put the following in the .htaccess file -
AddType video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm
Any ideas why this is happening?
Thanks!
I used to integrate mp4-videos this way:
<video src="path/to/file.mp4" poster="thumbnail.jpg" type="video/mp4" width="640" controls autobuffer />
My videos are MP4/H.264, Baseline profile, 480×360
Never had an issue with this. Maybe the path to your video isn't correct.
Related
We experience an issue with playing a mp4 file on ipad on webpage with a video HTML 5 player.
Issue:
It does not work on ipad/iphone. On all other platforms (Windows,Android, iOS desktop) it works fine.
This is the code:
<video id="my-video" width="400" height="240" preload="true" controls >
<source src="/media/video/6d9ab49-9936-4194-acvb-3cd9b60521fg/myvideo.mp4" />
</video>
Connected the ipad to the Mac to debug:
A message 'requested resource cannot be found'.
Does sound very clear but does not make sense because the mp4 file is accessible when you paste the url into the browser address bar.
Already tested and checked:
set src of mp4 to fullpath (including https:// or http://) instead of
using the virtual path ;
checked hostingprovider for 'Accept-Ranges: bytes' (with partial content (206) responses) ; settings are ok
play the same mp4 file from a remote url (accessed with or without https); strange but imporant : that works !
So I guess the issue really is that the mp4 can not be found or loaded on ipad.
But why?
Hope someone can help.
Have you tried it like this, include src directly inside <video> tag?
<video id="my-video" src="/media/video/6d9ab49-9936-4194-acvb-3cd9b60521fg/myvideo.mp4" width="400" height="240" preload="true" controls></video>
If it still doesn't work try to use only video element with src, remove preload and controls. Just to see if you can get it to work. And if still no results, try to go for absolute src path.
I had this very same problem serving videos on my Liferay Portal, which works perfectly on PC and Android, but not on iOS devices. After numerous tests, I think I've finally managed to nail down the cause.
For some reason, if the video file (eg MP4) is accessible by a guest user (ie accessible without having to log on to the server), then it will work fine on iOS. However, if the file is only accessible to logged on users, it won't work.
My theory on why this happens is that iOS is probably using a different session to do the range request check than the one used to play the video file. Thus, the range request check fails because the file is inaccessible.
I am using html5 <video> tag to play a video in the iPad/iPhone its playing good in local but when i update to the server i am just getting the play icon and its stuck there itself.
<video controls="true" preload id=videoContainer>
<source src=video/abc.mp4 type=video/mp4>
<source src=video/abc.ogg type=video/ogg>
<source src=video/abc.webm type=video/webm>
Your browser does not support the video tag.
</video>
Create .htaccess and added the following lines in it
AddType video/ogg .ogv
AddType video/mp4 .mp4
In ios application, capturing video in mp4 format and uploading it to amazon server.
we are embedding this uploaded video url in html file using video tag.
The problem is, it wont play in firefox since is it doesn't support mp4 format .
in some forum and blogs I have seen that we need to provide multiple formats of video (mp4, ogg, webm etc) in html.
but uploading different file format videos to server is not a good solution.
Any solution for this to achieve, with once format from iOS device , and it need to support in at least chrome , firefox and safari browsers .
If Chrome PC/Mac, Firefox PC/Mac, and Safari Mac/iOS are what you support, then you needed to provide 2 video sources and 2 audio sources:
HTML 5 Video
src="video.mp4" type="video/mp4" codecs="avc1.4D401E, mp4a.40.2"
src="video.webm" type="video/webm" codecs="vp8.0, vorbis"
HTML 5 Audio
src="audio.m4a" type="audio/mp4" codecs="mp4a.40.5"
src="audio.ogg" type='audio/ogg; codecs="vorbis"
I agree, it's ridiculous, fortunately Mozilla has given up on boycotting patent encumbered media formats and has enabled Firefox (v35) Mac to play MP4s. I just recently discovered that AAC (MP4 audio) is compatible with Chrome, Firefox, and Safari. So now life is much more simpler:
HTML 5 Media Nirvana
src="video.mp4" type="video/mp4" codecs="avc1.4D401E, mp4a.40.2"
src="audio.m4a" type="audio/mp4" codecs="mp4a.40.2"
The only browser that's left out is Opera, I can live with that.
I want to play local video file (like .mp4) in my iPhone apps. I can play youtube video file but I need play local storage file (myVideo.mp4) in my 'www' folder. How is it possible in iPhone7 using cordova 2.5? I am using html 5 video tag but unable to launch local video on my iPhone 7 device.
First you just put a normal video tag into your html page:
<video id="video" controls>
<source src="media/video/video.mp4" type="video/mp4"></source>
</video>
The video physical path is "www/media/video/video.mp4". Next ensure you have allowed video playback in the config.xml:
<preference name="AllowInlineMediaPlayback" value="true"/>
That's should be all.
I'm trying to play a F4V video with H264 encoding using StageVideo on AIR for iOS (iPad).
I'm using F4V because I need cuePoints in the video.
My video player works when using MP4 instead of F4V.
Is there a solution to play F4V in AIR for iOS through StageVideo? Or a way to embed cuePoints metadata in an MP4 file?
Check out this link -> Adobe AIR 3.7 - Bug 3558253
There is however a working example for local files as .zip for H264
I've not found any solutions to make it work.
So, i've ended up with a solution which play MP4 (H264) video and loading a text file filled with cuepoints informations (JSON loaded via URLLoader).
Then, i'm parsing the text file and handle CuePoints manually.
Hope it helps someone.