I am setting up a static blog for the music that I write. My music is played using HTML5 audio and the default audio controls for every browser. This works well on a desktop but when displaying on the iPhone browser the mobile theme is overridden and the width is increased to make the page much wider than the CSS. The audio player element is also misaligned.
If I view a blog post which doesn't have an audio player then it looks correct, like this:
The website is at http://108.171.179.41/ as I haven't migrated the DNS records from my old blog yet. In the future it will be at danielcompton.net
Does anyone know why the display of my website is odd when viewing on iPhone?
Related
Is there any way to customize VideoJS (v. 5) HTML5 player on iPhone?
We created custom elements on top of the player and also custom controls using the createEl() method. Everything looks fine on desktop, mobile (android) and tablets (android and ipad) but when it comes to iPhone the player is falling back to HTML default controls and custom elements are not displayed (see below images).
The player on Android:
The player on iOS:
There is also a portion of code in createEl() method in video.js which tells us something about breaking on iPhone.
// insert the tag as the first child of the player element
// then manually add it to the children array so that this.addChild
// will work properly for other components
//
// Breaks iPhone, fixed in HTML5 setup.
Dom.insertElFirst(tag, el);
this.children_.unshift(tag);
this.el_ = el;
return el;
Any solution for this issue?
The answer is simple: You can not (today, maybe on future) if you are playing videos using the Safari browser on iPhone.
Mobile Safari on the iPhone does not allow videos to play inline, they must always go fullscreen. The iPad will play them inline, though I do not believe they can have overlapping content.
If you want to play inline, you would need to build your own iOS application which has a UIWebView. UIWebView has a property, allowsInlineMediaPlayback, which can be set to YES. When using this on the iPhone, you can then use custom HTML for a video tag which sets the webkit-playsinline attribute.
Check here:
https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//apple_ref/doc/uid/TP40009523-CH3-SW20
iOS Note: On iOS, full-screen videos can only display the default controls.
I came across this ans to avoid fullscreen video player in iPhone.Can we use this module to create video player custom controls.
I have using jwplayer and have own custom video controls (fast forward/backward, transcript, slow/fast, volume control, fullscreen).This controls gets hidden in iPhone and native iPhone video player is shown.
Is there any way to avoid this iphone fullscreen and still bring own custom controls.
Can this module be used for jwplayer? to bring own custom video control with jwplayer.
I have not seen that particular library in use with our player, so you're more than able to try it - but I cannot guarantee any success, nor can we provide support for its use.
With that being said, iOS 10 is slated to bring inline video playback to Safari for iPhone and the good news is our player is already set up in the way it needs to take advantage of this. Obviously, iOS 10 is in beta and not final yet so things are subject to change, but this is good news for those customers looking for inline video playback in Safari on iPhone.
The basic parts of this full motion video game is:
The user is shown a video clip which either plays to the end or can be skipped. A clip could be something like a character talking or of a location. Some of the clips might loop until the user clicks something e.g. the clip might show birds flying in the park.
The user is presented with several choices that are overlaid over the video clip at some point where the choices are things like "1. go to the park" or "2. ask the man about the park".
Each choice is linked with another video clip and another set of choices e.g. if the user picks option 2, they are shown a video of the man responding and can then follow up with more questions.
I'd like the above to look seamless and presentable. For example, video clips and text options should fade in and out and I'd like the page to be fullscreen.
Would it be possible to do the above in HTML5 while supporting most desktop and mobile browsers? Would some other language be more appropriate? I'd rather not use Flash, primarily because then I cannot easily support iOS.
From doing some research, the above seems easily possible in all modern browsers on desktop machines with the caveat that there doesn't appear to be any reliable way to make an HTML5 page go full screen, unlike Flash. The iOS situation looks grim: as far as I know video clips will only play once the user has clicked on the clip and I'm not sure if I can overlay buttons on these. I've also read that the video tag can be buggy on Android.
Can anyone comment on what approach I can use for addressing these issues?
Edit:
More info:
I have no constraints about it being server or client hosted.
I know I can't realistically get this to work on every browser out there so I'm really asking: without having to write several ports of the game, what approach can I use to target a sizeable audience?
Can HTML 5 embed video? Certainly. Will it work on most desktop and mobile browsers? Well, define 'most'. If we're talking pure numbers, then no. Lots of the planet still using IE <8 on the desktop and Symbian on the Nokias.
The bigger issue, IMHO, is that video on a mobile device is typically handled by the device. I'm not sure you can over-ride that. For instance, on an iPhone, if I click an embedded video, it pops it out as it's own full-screen video. You'd have to experiment and see if you have any control over that.
Finally, is this a server hosted game? If so, grabbing a bunch of videos over a cell network may not be the idea user experience.
I've built a web app that uses the HTML5 tag and JavaScript code that renders other content synchronized with the running video. It works great in desktop browsers: Firefox, Chrome, and Safari. On an iPhone or a DroidX, the native video player pops up and takes over the screen, thus obscuring the other dynamic content that I want to display simultaneously with the video.
Is there any way around this? If necessary, I'll figure out how to write native apps for both those platforms, but it would save me a ton of effort if I could just stick with HTML5/JavaScript.
In iOS 10+
Apple enabled the attribute playsinline in all browsers on iOS 10, so this works seamlessly:
<video src="file.mp4" playsinline>
In iOS 8 and iOS 9
Short answer: use iphone-inline-video, it enables inline playback and syncs the audio.
Long answer: You can work around this issue by simulating the playback by skimming the video instead of actually .play()'ing it.
There's a property that enables/disables in line media playback in the iOS web browser (if you were writing a native app, it would be the allowsInlineMediaPlayback property of a UIWebView). By default on iPhone this is set to NO, but on iPad it's set to YES.
Fortunately for you, you can also adjust this behaviour in HTML as follows:
<video id="myVideo" width="280" height="140" webkit-playsinline>
...that should hopefully sort it out for you. I don't know if it will work on your Android devices. It's a webkit property, so it might. Worth a go, anyway.
Old answer (applicable till 2016)
Here's an Apple developer link that explicitly says that -
on iPhone and iPod touch, which are small screen devices, "Video is NOT presented within the Web Page"
Safari Device-Specific Considerations
Your options:
The webkit-playsinline attribute works for HTML5 videos on iOS but only when you save the webpage to your home screen as a webapp - Not if opened a page in Safari
For a native app with a WebView (or a hybrid app with HTML, CSS, JS) the UIWebView allows to play the video inline, but only if you set the allowsInlineMediaPlayback property for the UIWebView class to true
In iOS 10 beta 4.The right code in HTML5 is
<video src="file.mp4" webkit-playsinline="true" playsinline="true">
webkit-playsinline is for iOS < 10, and playsinline is for iOS >= 10
See details via https://webkit.org/blog/6784/new-video-policies-for-ios/
According to this page
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html
it is only available if (Enabled only in a UIWebView with the allowsInlineMediaPlayback property set to YES.) I understand in Mobile Safari this is YES on iPad and NO on iPhone and iPod Touch.
I don't know about android, but Safari on the iPhone or iPod touch will play all videos full screen because of the small screen size. On the iPad it will play the video on the page but allow the user to make it full screen.
I would like to play a video from inside the rendered page with an iPhone/Safari.
When I put a <video>, it's always opened and played in a separate full-screen Quicktime window. Is there a way to play the video directly from the page?
(a similar question Play video not in full screen mode suggests it's not possible)
Yes, it's possible to play video within the browser, but as you said, in the Quicktime fullscreen application, and the HTML5 sound API is not available (in iPhone OS 3.x).
But in the coming iPhone OS 4, it will be possible (used for iAd), so you will have to wait until this summer (or play with the beta SDK now).
No, with the current SDK compatible media will always play in full screen and there is no way to avoid that.