How do you stream M4V video on the web without using Flash? - iphone

I'm building a web site that needs to stream video and be friendly for handheld devices (especially the iPhone). Some handhelds don't support Flash so I'm avoiding the use of a Flash player. How does Youtube stream its videos so that they play on both desktops and iPhones? I'm looking for a player, or multiple players, which can be somehow activated based on the user's device.
Your help and guidance are much appreciated. Thanks.

The YouTube website and others use the HTML5 video tag for streaming playback on iPhones. It works like this:
<video width="480" height="360" controls>
<source src="test.mp4" type="video/mp4" />
<source src="test.ogv" type="video/ogg" />
</video>
In Safari (Desktop as well as mobile) and Chrome, the h264-compressed test.mp4 file will be played. Firefox will play back test.ogv. For other videos, you should still have a flash video player as fallback. You can have all the format choosing and flash fallback done automatically using HTML5Media. You might also check out SublimeVideo, which provides video player controls for the <video> tag.

Related

HTML Video tag is not working on safari and iphone device

I have spring MVC project where I have kept my video on resource folder (D:/folder/videos/) and same entry is made in my spring servlet xml as like
In my jsp file I have below entry to show video
<div id="groupsign" class="tab-pane fade">
<video width="100%" height="400px" controls="controls" controlsList="nodownload" autoplay loop muted playsinline >
<source src="<%=appUrl %>/videos/FirstVideo.mp4?preview=true" type="video/mp4">
<source src="<%=appUrl %>/videos/SecondVideo.mp4?preview=true" type="video/gg">
</video>
</div>
Still it not showing the video when run my application on server. It showing blank and just searching symbol in video area. This same code/video working on android device. If I replace video source by giving any public video link then its working. I am not getting what an issue and how to resolve the same. Any guidance will help me more.
Safari
Used autoplay loop muted playsinline in video tag but not luck
In Spring servlet configure resource folder like
<resources mapping="/videos/**" location="file:D:/folder/videos/"/ >
In JSP written video tag like
<video width="100%" height="400px" controls="controls" controlsList="nodownload" autoplay loop muted playsinline >
<source src="<%=appUrl %>/videos/FirstVideo.mp4?preview=true" type="video/mp4">
<source src="<%=appUrl %>/videos/SecondVideo.mp4?preview=true" type="video/gg">
</video>
I had the same issue with the ios mobile devices and solved it.
As mentioned here : Creating Video for Safari on iPhone: "HTTP servers hosting media files for iOS must support byte-range requests, which iOS uses to perform random access in media playback. (Byte-range support is also known as content-range or partial-range support.) Most, but not all, HTTP 1.1 servers already support byte-range requests."
So you must check whether your server uses byte-range caching or else reconfigure it (I did it with nginx).
PS: Another secondary reason for ios video incompatibility could be the incompatible codecs of each video. The following compression standards are supported:
-H.264 Baseline Profile Level 3.0 video, up to 640 x 480 at 30 fps. Note that B frames are not supported in the Baseline profile. -MPEG-4 Part 2 video (Simple Profile) -AAC-LC audio, up to 48 kHz

Solution for HTML5 Video not working in Safari , iPhone and iPad with player video-js

While I am working in web App with ASP.NET MVC , I just noticed that videos on my site are playing in Chrome , IE, Mozilla at Desktop and Android Mobiles , But it was not working at Safari iphone .. So I searched to find a solution and with some help finally I solved this problem and here are the steps:
**By using player Video-js (https://github.com/videojs/video.js/#quick-start )
<link href="//vjs.zencdn.net/5.11/video-js.min.css" rel="stylesheet" />
<!--Videojs-->
<div class="wrapper">
<div class="videocontent">
<video id="myvideo"
class="video-js vjs-big-play-centered vjs-16-9"
controls
preload="auto"
poster="~/Content/images/poster.png"
width="640"
height="500"
data-setup='{}'>
<source src="video.mp4" type="video/mp4" loop autoplay controls="true" />
<source src="video.webm" type="video/webm" loop autoplay controls="true" />
<source src="video.ogv" type="video/ogg" loop autoplay controls="true" />
</video>
</div>
</div>
<script src="//vjs.zencdn.net/5.11/video.min.js"></script>
<script type="text/javascript">
var video = videojs('myvideo');
document.getElementById('action').onclick = function () {
video.play();
}
</script>
** after I added this player some of videos played fine at all devices even Safari and others videos with Error : no compatible resources or check your server ..
After many searched and tried many suggestion , the reason was found (The codec of videos must be H264 with type .mp4 ) , so I toke one of these Videos that not played cause of Error no comp… ,and with a converter program I converted it to H264 .mp4 then uploaded it again and worked , that is it … I hope that help many programmers person
With Thanks
more resources: https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html
The only thing that could logically be a problem is if the videos are not encoded properly. In particular with both Safari and Mobile Safari, only H.264 encoded MP4 video is supported. MP4 is the container and can technically be used for other types of encoded video, which most likely has happened here.
Also, you need to be aware of encoding profile and level. Not all H.264 profiles are supported for all devices. You should be safe with one of Baseline, Normal, or High. High has the best compression to quality ratio of those three, so that's your best bet. The level is even more finicky. While more modern devices will support 4.2 or higher, 4.1 still enjoys the broadest support.
So specifically, your video needs to be an MP4, encoded with H.264 High 4.1.

Audio is not playing in Facebook app

I have a small HTML5 game with Javascript and JQuery. Every thing is working fine but the audio is not playing when the application starts.
I have used "audio" tag to play the sound.
<audio id="backgroundMusic" autoplay loop>
<source src="sounds/startTheme.mp3" />
<source src="sounds/startTheme.wav" />
</audio>
This issue persists in all the browsers.
Can anybody please help or advice me some work around?
Very thanks in advance.
P.S. - I think audio tag is not supported in facebook app.
After many tries I get this thing to work. The audio was not playing because Facebook only supports secured contents. (contents with ssl).
When I generated a verified SSL certificate it started working. Before I was using a self signed certificate.
Thanks you everybody for your suggestions.
I know facebook does uses HTML5 media element for example when displaying media content to a journal on iPad.
First I would check the audio tag you are using works on a blank HTML5 page (just to be sure there is no issue with the file/server you are using).
Could not it be that just the autoplay or loop attributes are not supported? We know that Apple disables autoplay on all of its mobile devices. Maybe facebook has rolled out something similar.
Try something like this to see if it plays on user interaction:
<audio id="backgroundMusic" controls>
<source src="sounds/startTheme.mp3" />
<source src="sounds/startTheme.wav" />
</audio>
To check if HTML5 audio is supported in an environment you can use:
function supports_audio() {
return !!document.createElement('audio').canPlayType;
}
More information on this here.
Otherwise good old flash can be a fallback option.

play hls or rtmp inside android browser

The goal is to play live streaming inside android browser, thus using the
html5 video player.
I tried with m3u8 (which works on ios and also while tapping directly the m3u8 inside android), I tried with RTMP.
This works on IOS, not on android
<video id="my_video_1" controls autoplay
preload="auto" width="100%" height="100%" data-setup="{}">
<source src="http://mysite.com:8080/hls/video.m3u8" '/>
</video>
and this link works on android browser (it opens a video player )
http://mysite.com:8080/hls/video.m3u8
So: what should I do to display some live video inside android browser ?
regards
Look at longtailvideo where a whole list of supported browsers and so on is available: http://www.longtailvideo.com/html5/hls/
also have a look at the footnotes: Sometimes it is necessary to to click 3 times at the play button.
Also only Android 4+ supports a little bit of hls. But .m3u8 playlists are definitiv possible in some browsers on some devices, but it is challenging.

Can't show .mov file on html5 video tag on iPhone

I tried different ways to show a .mov video ("ISO Media, Apple QuickTime movie" on linux) in HTML5 page with Iphone, but it isn't working.
My code is:
<video width="320" height="240">
<source src="test.mov">
</video>
With all desktop browser (chrome, firefox....) I can show the video.
Any Idea?
Thanks in advance.
Instead of using <source> tag use <src> attribute of <video> as below and you will see the action.
<video width="320" height="240" src="test.mov"></video>
As per HTML5 standards the only videos that are trully supported cross browser are MP4, ogg, and WebM. All other video files are not guaranteed to work with the standard html5 video player.
You can read more about it at this website.
http://www.w3schools.com/html/html5_video.asp
Alternatevily you can look for other video players that can help you make this for you.
Hope this helps.
The .MOV media type (Quicktime movies) is not supported in HTML5 browsers using the video element at this time. I recommend you encode those to MP4 (MPEG4).
But you can try this HTML below. The new video HTML5 element will not work as it supports limited media types (MP4, OGG, or WEBM). Using the older HTML embed or object elements forces the browser to use a plugin to support the video, if one exists. If your Quicktime movie plays, it will depend on how Apple and their Safari browser manage the plugin or player for this media type:
<embed id="embed1" src="test.mov" type="video/quicktime" style="width:320px;height:240px;">
<noembed>Your browser does not support this media object or the embed element.</noembed>
</embed>