2020: iOS Safari Video Autoplay Options? - javascript

All of my research and effort has been hitting a wall so far in this regard: Is there any way to make video autoplay on Safari in iOS currently?
Some have mentioned video transcoding or using playsinline (which works on Android), but nothing has worked for iOS / Safari.

I believe the following is still the current picture for iOS:
elements will now honor the autoplay attribute, for elements which meet the following conditions:
elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
elements will also be allowed to autoplay without a user gesture.
If a element gains an audio track or becomes un-muted without a user gesture, playback will pause.
elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM.
elements will pause if they become non-visible, such as by being scrolled out of the viewport.
Source: https://webkit.org/blog/6784/new-video-policies-for-ios/
This also requires that the video element has the 'playsinline' attribute.
So there is support for autoplay video, but it is limited so may not meet your particular needs.
One other note - if your use case is for a web view rather than a regular browser, then you have more control. See the documentation for 'wkwebviewconfiguration' and in particular 'mediaTypesRequiringUserActionForPlayback' here:
https://developer.apple.com/documentation/webkit/wkwebviewconfiguration

Related

Draggable video scrubbing

I have a MP4 video of a product which shows a 360 of the product (so it looks like it's spinning) - I have it autoplaying on the page and looks great.
I want the user to be able to click and drag on the video to basically rewind or fastforward the video, so they can kind of scroll back and forth and spin the product around as they wish.
We have used the js-cloudimage-360-view library and used images, but because we wanted this as smooth as possible each colour had 360 images and loading times weren't great, we have MP4s which are small in size and load fast but it's just the srubbing I can't get right.
I'd had a look at this https://codepen.io/webandapp/pen/xEjjOJ too but it's supper jumpy, essentially we want if the user drags to the right it fast forwards as they drag, when they stop it should play from that point (and rewinds if dragging to the left) - this should be as smooth as possible.
The video is just a HTML video element like so:
<video id="three-sixty-video" preload="auto" controls loop playsinline autoplay muted>
<source src="/video/video-1.mp4" type="video/mp4;">
</video>
Scrubbing on a streamed video is limited by the speed at which the video can be downloaded, decoded and displayed.
For a large video on most devices and connections it is not practical/possible to do all this as quickly as a user can scroll along the video timeline.
This is why video containers (mp4 etc) often include a track of thumbnail images which are displayed when the user scrubs along the line.
In other words, it is not actually the video you see in the small image in the timeline, but the appropriate thumbnail for that time in the video.
When the user stop scrubbing, the player then requests that section of the video, decodes and displays it. This is (generally) not immediate.
If your video is small enough and is downloaded completely then you may find you can scrub as quickly as you want, but even then it may be device/client dependent - a quick local test with a number of videos seem to suggest it should scrub ok when available locally:
Using a relatively small 30MB, 50 second local mp4 video, available locally on he computer hard drive (a MAC), scrubbing is relatively smooth using the Quicktime client player.
The same video on the same device being viewed by the Safari browser rather than directly by the QuickTime client appears to be similar, although it is hard to be sure. The playback may well use very similar paths under the skin.
Using a much larger 2G, 4K, 2 minute 30 second video, also locally on the hard drive, scrubbing is again relatively smooth both in Safari and QuickTime.
As a side note, if you do decide the solution is to have the video fully downloaded before you play, that is also an interesting challenge. Most effort is usually focused on the opposite, allowing a video to start playing before it fully downloads. You may find that, providing the video is not too big, having the header info at the end (the MooV atom for mp4) will force the browser to download it fully. This is the opposite of the mp4 faststart you will see discussed some places. I'm not sure how reliable this will be as I think some browser may be clever enough to 'search' in the video by making different requests for bytes at the start and end to find the metadata.

How to get FrameRate of the video on HTML5 Video element

I am developing a time-lapse video player using HTML5 Video element and is controlled by mouse (touch) events. The problem is that the videos which will be played are encoded at a different frame rate, not fixed like common 24 FPS. In native platforms such as iOS, there is a native API which provides video's frame rate. I am wondering if is there any similar API on HTML5 Media API. Without this information, I cannot play a video smoothly on my player.
Mozzila Developer Network does not list any methods for finding the framerate of a media element. However, there is an experimental method called seekToNextFrame which could be used to advance frame by frame. This is only supported by firefox behind a flag.

Cordova IOS video player

I am using webRTC streaming via RTCMultiConnection. I created a Cordova application and get the blob URL from the server in the video tag. In Android and browsers, this works well. In IOS, the video plays but the control buttons do not work. Also, the video's position is static on the application. I change the page in the application but the video always stays. When I try to pull the page, it looks like this:
My HTML code :
<video webkit-playsinline playsinline class="screen-video" src="" reload="metadata" autoplay controls></video>
And how I append in JS:
var videoURL = event.mediaElement.src;
$('.screen-video').attr('src', videoURL);
My videoURL is: blob : file:///adfsg-123asd1-12asfd3-4fdssdv
Edit:
I can see my iPhone's front camera on the browser live. But I can not see myself, on iPhone.
The video player does not work.
Edit 2 (26-09-2017):
There is no problem with the mp4 video. I tried with remote mp4 video, and it works well.
iOS doesn't play nice with embed media sadly.
As this SO answer suggests:
For the controls, as the videos always play in full-screen, the space left will capture all the click and touch events.
A workaround suggested above could be to set the video's tag width & height to 1/1 dimensions - fixed position to -10,-10 and trigger "play" manually with a custom UI instead the video.
Note the following info from Apple's Dev Site:
Optimization for Small Screens
Currently, Safari optimizes video presentation for the smaller screen
on iPhone or iPod touch by playing video using the full screen—video
controls appear when the screen is touched, and the video is scaled to
fit the screen in portrait or landscape mode. Video is not presented
within the webpage. The height and width attributes affect only the
space allotted on the webpage, and the controls attribute is ignored.
This is true only for Safari on devices with small screens. On Mac OS
X, Windows, and iPad, Safari plays video inline, embedded in the
webpage.
Default Height and Width on iOS
Because the native dimensions of a video are not known until the movie
metadata loads, a default height and width of 150 x 300 is allocated
on devices running iOS if the height or width is not specified.
Currently, the default height and width do not change when the movie
loads, so you should specify the preferred height and width for the
best user experience on iOS, especially on iPad, where the video plays
in the allocated space.
iPhone Video Placeholder
The placeholder provides a way for the user to play the
media. If the iOS device cannot play the specified media, there is a
diagonal bar through the control, indicating that it cannot play.
In case you are willing to consider alternatives, this cordova plugin could be useful:
This plugin allows you to stream audio and video in a fullscreen,
native player on iOS and Android.
Basic usage:
var videoUrl = STREAMING_VIDEO_URL;
// Just play a video
window.plugins.streamingMedia.playVideo(videoUrl);

HTML5 <video> Tag Performance

I have a <video> element at the top of my page playing an animation in the background (very similar to the one found on the Google Hangouts page). On most computers, the video plays smoothly and it seems fine, but on older hardware there is a lot of lag and the browser slows down quite a lot.
Is there anyway to detect the performance of the video playback? I'd like to either replace the video with a static image or pause the video if performance is an issue.
Use the video metrics if available in your browser. Here's an example using webkit prefixed DroppedFrameCount.
http://git.chromium.org/gitweb/?p=chromium.git;a=blob;f=chrome/test/data/media/html/media_stat_perf.html
See also: http://wiki.whatwg.org/wiki/Video_Metrics for the Moz prefix.
You could use Get the timestamp of loaded page to determine how fast the user loads the page, then if their bandwidth is below a specified threshold, supply an image rather than the variable.

div absolutely positioned over html5 video player not capturing clicks when video is playing on ipad, ios6

i have a absolute div positioned over a custom brightcove video player.
when the video is not playing , i can capture it being clicked. however, when
the video is playing, no clicks are getting through.
what could be the problem? could it be that brightcove player is preventingDefault for the clicks?
Mobile Safari does not allow any elements positioned on top of a video element to receive any mouse/touch events, except when the video element does not have the "controls" attribute. This has nothing to do with preventDefault.
If you were creating your own video element, the solution would be easy: disable native video controls on the element and build your own (or use something like videojs, jPlayer, etc.). But it's a little tricky to get Brightcove to do this is quite tricky. You need to create a custom player, which unfortunately is going to be restricted to your Brightcove account and cannot be applied generally to all Brightcove videos.
Brightcove does have some documentation on how to do this if you search for it, but be careful because when they say "chromeless player", they don't mean a player without any controls, like YouTube does. Brightcove's chromeless player still has play controls; it just doesn't have any of the extra share buttons below/above the video.

Categories

Resources