HTML5 video doesn't play in IE, mobile browsers - mobile

I'm having a problem where an html5 video is not loading/playing in IE10 or on either Mobile Chrome or Safari on iPhone or Android. The video plays fine on all other desktop browsers. Not sure what the issue is. The mp4 was saved with baseline H.264 codec.
The video in question is at the top of the page at res.dallasnews.com/test/jhancock/videoTest2
Any ideas or suggestions would be greatly appreciated.

Related

HTML5 video tag. Some .MP4 videos don't work in Chrome

We're making our webapp with ASP.NET MVC 5, and we're facing to an strange behaviour while playing our mp4 videos (codec h264 all of them) between web browsers.
These videos are not stored in filesystem, they're stored like BLOBs inside a table of our SQL Server.
The way we link our BLOBs with the HTML5 video tag is with a source that points to an Action that returns a FileStreamResult with ContentType header set properly.
Firefox and IE can play them, but Chrome can't with all. When I click on the 'Play' button, the videoplayer stills showing a black screen. When this happens and play button is clicked, network tab of the browser shows up two 200 HTTP responses: one with the video full size in bytes and the other one showing 0 bytes. No errors on console.
What's wrong with Chrome? What's wrong with us?
Thank you for your time guys, I'm so thankful to this site :)
After some time of researching, we found that MP4 videos with h264 codec that exceed 5MB/s bitrate are not played by Chrome HTML5 video player.
Until now our solution is reencoding MP4 videos that exceed that bitrate to solve this.
If anyone has a better answer, it obviously will be appreciated ;). We hope it could work for anyone that has the same problem.

Stream live video to Android and iPhone smartphones

I am developing a live video streaming solution for a client with the following requirements:
- Stream live video to high-end Android and iPhone devices, from a mobile-optimized web app (NOT native apps)
- The video should not be full screen but partial screen, so that other HTML content can be displayed below the video
So my question is, what is the video format/technology that allows live video streaming in both devices? I've heard about HLS but I am not sure it plays in both devices.
And also, is there a way to prevent the video from going full screen? I've come across this in SO http://broken-links.com/tests/video/, but it's for on demand video. Could it also apply for live video streaming?
Thanks in advance
You should set allowsInlineMediaPlayback attribute of your UIWebView instance to YES for iOS.
From Apple's UIWebView reference page:
allowsInlineMediaPlayback
A Boolean value that determines whether HTML5 videos play inline or
use the native full-screen controller.
#property(nonatomic) BOOL allowsInlineMediaPlayback Discussion The
default value on iPhone is NO.
In order for video to play inline, not only does this property need to
be set on the view, but the video element in the HTML document must
also include the webkit-playsinline attribute.
For Android, AFAIK default behaviour of Android's WebView is not triggering media player with fullscreen. You should be able to use WebView as is.
You can get information about supported video formats with those links:
iOS Media Layer Supported Video Formats
Android Supported Video Formats
There are two major industry standards, I guess it won't be a problem if I understand your concerns correctly.
Hope that helps.

Website content is pushed left when viewed in Android browsers

This website's content is bunched to the left when viewed on android browsers, as demonstrated in the two screenshots below. I feel like I've come across other websites with this issue when using my mobile browser, so I'm thinking it isn't an uncommon issue.
The site isn't responsive (yet) and there are no media queries. I am not using the viewport meta tag, to prevent initial zoom-in on a non-responsive site (as detailed here).
The issue isn't happening on:
iOS Simulator, Safari Browser
Opera Mobile Emulator (emulating opera running android devices like Kindle Fire and HTC phones)
Android Samsung Smartphone, Firefox and Opera browsers
The issue is happening on:
Android SDK, (emulating an android browser on a Nexus S)
A Samsung Galaxy S2 (pictured below), in Chrome, Dolphin, & Default browser
Here are the details for the device in the screenshot:
device_model = samsung SGH-T989
device_res = 480x800
orientation = portrait
os_name = Android
os_version = 4.0.4
pixel_density = 240 dpi
url = http://bryanbraun.com/
Mobile Version
Desktop Version
Try adding a background-color on the tags which contain the text. This way, android will (hopefully) consider these some kind of blocks and (probably) will render them fine.

Titanium Appcelerator upload video for iphone and android

I would like to know which are all format of a video that should be converted when you upload a video on mobile device (Android and Iphone).
This is for a Titanium Appcelerator App.
User should be able upload video from mobile (Android or Iphone) and this should be visible by both device.
In html5 the format of video should be .webm, .ogg and .mp4 (and flv for old browser).
For mobile app?
Thanks
This has already been asked.
What video formats are compatible with the assets library?
Essentially it depends on your device, but I would just stick with H.264 AAC and you will most likely be fine, either way this all depends on your server side to convert the video to a universal format and deliver, this is not so much a mobile / TItanium question.

jQuery Mobile/PhoneGap and Audio

I'm writing an HTML/CSS jQuery Mobile app to be native-compiled for iPhone, Android and Blackberry using PhoneGap Build.
The app needs to play very short spoken word audio snippets, possibly in MP3 format. What are the options for maximum cross-device compatibility?
I understand there are problems with the HTML5 audio tag, and I've had a look at jPlayer but can't get it to work on iOS 4 where the player is added to a panel element.
Thanks
you will have to use the default media functions which included with phonegap itself ..
here is the link to the doc file
http://docs.phonegap.com/en/1.3.0/phonegap_media_media.md.html#Media

Resources