I would like to know how to display the HTML5 audio controls just when the audio file is played on an iPad, iPhone etc...
I have no problem to use the preload feature on any pc or mac, but it does not work on a mobile device and need ato show the player just for iPad.
COuld you help?
You can look at the user agent (using Javascript) and check which device is trying to access your website. You might want to go with a regex approach like this for checking (for example) if it's an iPad:
var ipadDevice = navigator.userAgent.match(/iPad/i) != null;
Then use that variable to show or not show the controls.
Related
I designed a sample web application in which i used the video tag like this:
<video src="test.mp4" width="320" height="240" controls="controls">
<track kind="subtitles" src="test.srt" srclang="en" type="text/vtt">
</video>
When i tested this out on iPhone5 with iOS7, on selecting English from Closed captioning menu in the video player, no subtitles showed up. Am i doing it the wrong way?
What is the correct way of showing subtitles on the video? I couldn't find anything from iOS Developer Library. So, thought of putting this up.
I'm not sure whether you've created that code correctly (not a dev) however we're currently having trouble with captions created using WebVTT format. Captions are there, they work on desktop no problem but on iOS7 they only show once you've turned captions off then back on.
When you load the video, and toggle the captions button on the player the captions are defaulted to On but do not display. If you toggle captions to Off, close captions options, re-open captions option and toggle On, they display.
I have this webpage:
http://healthpad.net/dashboard/
It have 10 <video> elements on it.
For some reason, when I load the page on an iPad, it is not showing the video posters.
Try the following:
load the page on a desktop browser
load it on an iPad or iPad simulator, and you get a big black box with a play button
please tell me why this is happening?
Here's what I've already ruled out:
Image Content-Type header.
I've validated that the image content-type header is properly set.
In the example above, the Content-Type header properly image/jpeg.
Interference with the video.js library
VideoJs is used to show that nice play button on desktop browsers and to customise the controls. This library doesn't interfere with the native player however.
Just to make sure, I've created a test video page which doesn't have the video-js class, so the library doesn't pick up and process that video. In fact, the test page doesn't even include any JS library, it's just
<html><body>
<video
controls
height="400"
width="600"
poster="http://healthpad.net/media/CACHE/images/uploads/video_poster_1414/bd5fba5a68ddd0f4b3f61193f6908962.jpg"
src="http://healthpad.net/media/uploads/video_processed_720p_1414.mp4"
></video>
</body></html>
http://healthpad.net/rj_templates/test/zzz/
Usage of any video attributes that may not be supported on Mobile Safari
The test page above just has a plain video tag. I've tried removing every other attribute except for src and poster, it didn't help.
Most of the StackOverflow questions on the topic just say "Restart your iPad"
Here's where it gets weird:
If you google around on this, the answers on StackOverflow that have been accepted often say "Restart your iPad, that did it for me".
So I've tried doing the same thing, at first I just said that it doesn't work in my case.
Then, I tried this:
(all of the following on the iPad simulator)
Go to the site, video posters don't show
Go to the test page (http://healthpad.net/rj_templates/test/zzz/), video poster doesn't show.
Click home to exit Safari (or Cmd+Shift+H mac shortcut for the simulator)
Double-Click home button to get the task switcher outside of Safari, tap and hold on the safari icon until the kill button shows.
Kill Safari
Open safari (restarted). At this point, if you load the test page (the one with just one video), the poster will show.
Now go to the multi-video page: (http://healthpad.net/dashboard/). Video posters don't show.
Go back to the single-video test page, the video poster for that one no longer works either.
Repeat steps 3 to 8 to see the process of when video posters stop working.
So apparently, at some point, Mobile Safari decides it will no longer show any video posters.
Also, apparently, my site triggers this condition.
Clarifications:
When posters no longer work, it doesn't only occur on one domain, no video posters will be loaded for any other site, regardless whether or not it's on a totally different domain (e.g. the demo video from http://www.videojs.com/).
In order to reset this behaviour, from what I've seen, you have to kill and restart Safari. Just closing and reopening it doesn't reset this state.
Does anyone have any idea why this is happening? Is there a way to work around it?
EDIT: looks like this no longer works. Not shocking given how much iOS has changed in the last 7 years.
I got this working by using a PNG instead of a JPG.
Weird thing is, the JPG worked in iOS Safari locally (via a POW server on local wifi) but when pushed to staging the poster image didn't load. Both the local and staging code were referencing the same file on S3.
Changed the file format to PNG and it loads fine.
I see the question keeps getting upvoted once in a while, though there's no answer.
So here's what I ended up doing:
On iOS, instead of showing the video player (even with autoload=false), I will just show the poster and a play button, two standalone <img> tags.
When they get clicked, I create the video player from javascript and tell it to play. Works fine, users don't see much difference.
I fixed it by adding preload="none" to my code.
<video width="344" preload="none" height="217" poster="/themes/custom/xxxxxx">
In Safari settings [iOS7] Block Pop-Ups turned "OFF" seemed to cure this for me, hope this helps.
Well if someone is still stuck on this is how I managed to get it done in React.js but the algorithm itself should be useful in any framework:
First I detect whether the browser is safari or not using the following in a useEffect:
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
then I set it inside a state object.
If safari is true then instead of displaying the video i simply display an image with that poster as its source. Then I have an onClick handler on the image tag itself clicking on it will change the above state back to false and hence image component will stop showing and video will be shown instead. Now one more problem you would have to tackle here is that on image click the image will disappear and video will appear and you'll then have to click the video again for it to play. That's bad UX. so for that you can simply attach a ref to the video and inside the click handler for Image after you set the state simple do :
videoRef.current.play()
This will start playing the video as well.
I know this is a hacky solution so don't come at me but it was the only thing i could do to get it work.
When embedding a video with autohide=0 and controls=1 (which is default anyway), one would assume the controls are always visible.
This is however not the case when looking at an embedded video on Android or iOS, where the exact same embed code yields a player without "always-on" controls (e.g. before clicking "play").
I've created a small demo which indeed has YT display the controls when viewed on desktop, but not when viewed on iOS or Android.
My questions:
Is this a bug (and if so; is a solution in the works)?
Is there another way to force the controls to be visible on mobile?
iOS Safari supports HTML5 video (it uses Quicktime to render it). Behind the scenes, the YouTube API is creating an HTML5 video element inside its iframe. There is no HTML5 attribute that specifies whether or not to keep the controls visible, therefore YouTube cannot make the controls stay visible on the iOS.
Unfortunately, at this time, I think the only solution is to build your controls and use the javascript DOM API to control the video.
So here's the challenge. Make a clickable popcorn link OVERLAYING the video. Simple enough on desktop, but iOS is proving to be a challenge. If the video element has the controls attribute iOS hijacks all clicks within the video window, making the link overlay un-clickable. However if the controls attribute is not present on the video element, the popcorn links are clickable and work well.
Problems is, now there are no video controls. And I need those. So I figured some hand written javascript based video controls should work out fine. No controls attribute on the video tag so popcorn overlays are clickable, plus working controls! My attempt with this is to use video.js.
So now I have video.js video controls and popcorn living in harmony on desktop. But on iPad the video.js part works, but the popcorn part doesn't anymore. I get the video.js controls, but no popcorn events fire. However there are NO ERRORS, and the script executes completely.
Does anyone know what is happening here? Why would video.js stop popcorn only on iOS? Is there a solution?
PROBLEM DEMO
VideoJS has to make changes to your web page to insert all its controls and get them positioned correctly, and that includes moving the video element around. Mobile Safari is notoriously sensitive and a little bit weird about this stuff. It looks like VideoJS is removing your original video element and replacing it with a new one, and this is happening after Popcorn has attached it self to the original.
Debugging minified Javascript on Mobile Safari is no picnic, so I can't tell exactly why VideoJS is doing this on the iPad and not other browsers. But using the console, it's possible to get a rough idea what's going on:
document.getElementsByTagName('video')[0] ===
window.Popcorn.instances[0].media
//false!
That means the video element that Popcorn is listening to is not the same one that you're seeing and playing in your web page. From this command...
window.Popcorn.instances[0].media.parentNode //null!
...you can see that the original tag exists in memory but is not attached to the DOM. So while the new video plays along, the original one is stuck paused at 0:00.
The solution is to set up your Popcorn instance after VideoJS is done doing its business. And then make sure you reference the video element properly, because now '#popacorn' references a <div>, and the new video element is called "popacorn_html5_api". That should cover you for iOS as well as desktop browsers.
I had the same problem in Firefox. Popcorn not working with videoJS.
I solved my problem like this:
jQuery(function(){
_V_('videoid').ready(function() { // videoJS ready ?
console.info('videoJS ready : player ID = '+$(this).attr('id'));
console.info('videoJS ready : videoObj ID = '+$('#videoid video').attr('id'));
var pop = Popcorn( "#"+$('#videoid video').attr('id') );
// etc...
});
});
Like said brianchirls, videoJS makes a div id = "videoid" containing a video id = "videoid_html5_api", so the object id="videoid" is no longer a video object.
I’m writing an HTML5 page with a embedded video tag for the iPad.
How can I hide or disable the fullscreen button? I just need to show the video without the fullscreen option.
As far as I know (I could be wrong, this isn’t really my area), you can’t tell Safari how to render its standard video controls.
However, you can tell it not to render its standard video controls (at least according to the HTML5 spec) by omitting the controls attribute from the video tag.
You can then write your own play/pause controls. (See e.g. http://diveintohtml5.ep.io/video.html#markup). That’s obviously a bit more work, but I think it’s your only option.
If you don’t want to write your own controls from scratch, there are a couple of good pre-built ones out there, specifically:
Video JS
Video for Everybody
They’re more focused on providing video via HTML5 or Flash depending on browser capabilities, but you might be able to extract the control parts, or at least see how they’re doing it.