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.
Related
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.
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?
I have a very rare problem on iOS (iphone).
i developed the site yolieva.de with a videoclip which also runs on ios. but it plays in the background because on top is the navigation with z-index. but it is not accessible from ios. kind of disabled because of the videoclip. you may want to try it with an iphone and you see you cant click through the site…
how to solve this? i want to keep the navigation above the video
I think this has something to do with how iOS deals with the videoclip, so I am not sure that you can do anything about it directly.
Why don't you make the div containing the flash player (id player) smaller on the iphone?
In fact, on the iphone your flash video is not shown in place, there is anyway a change of view, so there is no need of having it full screen either. Of course, you should make your flash player div smaller only for iOS, not other browsers, where it is fine that it is full screen...
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.