Videojs autoplay on iphone

Autoplay playsinline without muted does not work correctly on iOS 10+ #4296

Comments

marguinbc commented Apr 19, 2017 •

Description

When loading a videojs player on iPhones with iOS 10 and up and using the autoplay and playsinline attributes, the video incorrectly attempts to begin playback. The player adds the vjs-has-started class, hides the poster and big play button and shows the loading spinner before revealing the first frame of content.

Ideally, the behavior should be the same as that of the HTML5 video element on iOS and not start UNLESS the muted attribute is present OR the video has no audio track.

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

1. Open the test page above.
   2.Note that the top player with autoplay and playsinline attempts to play and stops after hiding the big play button and poster but then stops playing.
   3.Note that the second player, without autoplay and playsinline behaves as expected.

Results

Expected

The player does not attempt to begin playback and the big play button and poster remain visible until the user taps the play button.

Actual

The player attempts to start playing, hides the poster, big play button, and shows the loading spinner.

Error output

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

browsers

Safari on iOS on iPhones

plugins

are any videojs plugins being used on the page? If so, please list them below.
N/A

The text was updated successfully, but these errors were encountered:

leoafarias commented May 18, 2017

@marguinbc iOS does have a limitation of autoplaying the video if there is volume, without user interaction. You can read more about on the following link
https://webkit.org/blog/6784/new-video-policies-for-ios/

WoZ commented May 18, 2017

@leoafarias thank you for reply, but author is saying about another issue and it’s not about limitation. I may confirm described behaviour.

hamishrouse commented May 26, 2017

I too experience this issue on iOS 10.3.1

When using autoplay and playsinline attribute, on iOS 10.3.1 it attempts to play the video but stops on the first frame on page load (hides big play button and poster)

Since iOS suggests it does not autoplay I was expecting the poster and big play button to remain until the user presses play.

arashilan commented Jul 12, 2017

So how solve these problems？

vogtdominikgit commented Jul 12, 2017

I also experienced this issue when testing the autoplay/inline capability inside the Captive Network Assistant and can confirm, that autoplay/playsinline/muted works in iOS 10.1 but fails in iOS 10.3

It is not video.js related though.

gkatsev commented Jul 13, 2017

There is no way to solve the autoplay problem. However, video.js should try and know that autoplay has failed and not change its has-started state. We’re going to be looking at this in the coming weeks. Hopefully, we’ll have a solution before Safari 11 ships the same.

gkatsev commented Aug 11, 2017

Our first PR for improving autoplay behavior is #4562

Источник

Video does not play in In iOS device — iPad and iPhone #3784

Comments

VinaykumarNM commented Nov 16, 2016

Hi,
I am using videoJs with following setUp.

#Description
var setup = < 'techOrder': ['html5', 'flash'],
‘preload’: ‘none’,
‘autoplay’: false
>;
var videoJsObject = videojs($videoTag[0], setup);
videoJsObject.controls(true);

videoJsObject.src( <
type: ‘video/mp4’,
src: ‘https:///Download/06836000001ydBCAAY’
>);

Results

Expected

Should run the video in iOS device. The same works in desktop and android tablet and phones.

Actual

In iPad and iPhone show error : «The video could not be loaded, either because the server or network failed or because the format is not supported»

Error output

«The video could not be loaded, either because the server or network failed or because the format is not supported»

Additional Information

The same works in desktop and android tablet and phones. When traced the response on desktop its following —
Cache-Control:private
Content-Disposition:attachment; filename=»1.mp4″
Content-Length:1250296
Content-Type:video/mp4;charset=UTF-8
Date:Wed, 16 Nov 2016 07:36:51 GMT

versions

videojs

what version of videojs does this occur with?
videoJs — v5.12.6

iOS — iPad and iPhone

The text was updated successfully, but these errors were encountered:

Источник

Options

Setting Options

The Video.js embed code is simply an HTML5 video tag, so for many of the options you can use the standard tag attributes to set the options.

Alternatively, you can use the data-setup attribute to provide options in the JSON format. This is also how you would set options that aren’t standard to the video tag.

Finally, if you’re not using the data-setup attribute to trigger the player setup, you can pass in an object with the player options as the second argument in the javascript setup function.

Individual Options

Note on Video Tag Attributes

With HTML5 video tag attributes that can only be true or false (boolean), you simply include the attribute (no equals sign) to turn it on, or exclude it to turn it off. For example, to turn controls on:

The biggest issue people run into is trying to set these values to false using false as the value (e.g. controls=»false») which actually does the opposite and sets the value to true because the attribute is still included. If you need the attribute to include an equals sign for XHTML validation, you can set the attribute’s value to the same as its name (e.g. controls=»controls»).

controls

The controls option sets whether or not the player has controls that the user can interact with. Without controls the only way to start the video playing is with the autoplay attribute or through the API.

autoplay

If autoplay is true, the video will start playing as soon as page is loaded (without any interaction from the user). NOT SUPPORTED BY APPLE iOS DEVICES. Apple blocks the autoplay functionality in an effort to protect it’s customers from unwillingly using a lot of their (often expensive) monthly data plans. A user touch/click is required to start the video in this case.

preload

The preload attribute informs the browser whether or not the video data should begin downloading as soon as the video tag is loaded. The options are auto, metadata, and none.

‘auto’: Start loading the video immediately (if the browser agrees). Some mobile devices like iPhones and iPads will not preload the video in order to protect their users’ bandwidth. This is why the value is called ‘auto’ and not something more final like ‘true’.

‘metadata’: Load only the meta data of the video, which includes information like the duration and dimensions of the video.

‘none’: Don’t preload any of the video data. This will wait until the user clicks play to begin downloading.

poster

The poster attribute sets the image that displays before the video begins playing. This is often a frame of the video or a custom title screen. As soon as the user clicks play the image will go away.

The loop attribute causes the video to start over as soon as it ends. This could be used for a visual effect like clouds in the background.

width

The width attribute sets the display width of the video.

height

The height attribute sets the display height of the video.

Component Options

You can set the options for any single player component. For instance, if you wanted to remove the muteToggle button, which is a child of controlBar , you can just set that component to false:

This also works using the data-setup attribute on the video element, just remember the options need to use proper JSON notation.

The components guide has an excellent breakdown of the structure of a player, you just need to remember to nest child components in a children array for each level.

Источник

Videojs autoplay on iphone

Copy raw contents

Copy raw contents

Video.js Options Reference

Note: This document is only a reference for available options. To learn about passing options to Video.js, see the setup guide.

Table of Contents

Standard Element Options

Each of these options is also available as a standard element attribute; so, they can be defined in all three manners outlined in the setup guide. Typically, defaults are not listed as this is left to browser vendors.

Type: boolean|string NOTE: At this point, the autoplay attribute and option are NOT a guarantee that your video will autoplay. NOTE2: If there is an attribute on the media element the option will be ignored. NOTE3: You cannot pass a string value in the attribute, you must pass it in the videojs options

Instead of using the autoplay attribute you should pass an autoplay option to the videojs function. The following values are valid:

• a boolean value of false : the same as having no attribute on the video element, won’t autoplay
• a boolean value of true : the same as having attribute on the video element, will use browsers autoplay
• a string value of ‘muted’ : will mute the video element and then manually call play() on loadstart . This is likely to work.
• a string value of ‘play’ : will call play() on loadstart , similar to browsers autoplay
• a string value of ‘any’ : will call play() on loadstart and if the promise is rejected it will mute the video element then call play() .

To pass the option

More info on autoplay support and changes:

Determines whether or not the player has controls that the user can interact with. Without controls the only way to start the video playing is with the autoplay attribute or through the Player API.

Sets the display height of the video player in pixels.

Causes the video to start over as soon as it ends.

Will silence any audio by default.

A URL to an image that displays before the video begins playing. This is often a frame of the video or a custom title screen. As soon as the user hits «play» the image will go away.

Suggests to the browser whether or not the video data should begin downloading as soon as the element is loaded. Supported values are:

Start loading the video immediately (if the browser supports it). Some mobile devices will not preload the video in order to protect their users’ bandwidth/data usage. This is why the value is called ‘auto’ and not something more conclusive like ‘true’ .

This tends to be the most common and recommended value as it allows the browser to choose the best behavior.

Load only the meta data of the video, which includes information like the duration and dimensions of the video. Sometimes, the meta data will be loaded by downloading a few frames of video.

Don’t preload any data. The browser will wait until the user hits «play» to begin downloading.

The source URL to a video source to embed.

Sets the display width of the video player in pixels.

Each option is undefined by default unless otherwise specified.

Puts the player in fluid mode and the value is used when calculating the dynamic size of the player. The value should represent a ratio — two numbers separated by a colon (e.g. «16:9» or «4:3» ).

Alternatively, the classes vjs-16-9 , vjs-9-16 , vjs-4-3 or vjs-1-1 can be added to the player.

Prevents the player from running the autoSetup for media elements with data-setup attribute.

Note: this must be set globally with videojs.options.autoSetup = false in the same tick as videojs source is loaded to take effect.

When used with the responsive option, sets breakpoints that will configure how class names are toggled on the player to adjust the UI based on the player’s dimensions.

By default, the breakpoints are:

Class Name	Width Range
vjs-layout-tiny	0-210
vjs-layout-x-small	211-320
vjs-layout-small	321-425
vjs-layout-medium	426-768
vjs-layout-large	769-1440
vjs-layout-x-large	1441-2560
vjs-layout-huge	2561+

While the class names cannot be changed, the width ranges can be configured via an object like this:

• The keys of the breakpoints object are derived from the associated class names by removing the vjs-layout- prefix and any — characters.
• The values of the breakpoints object define the max width for a range.
• Not all keys need to be defined. You can easily override a single breakpoint by passing an object with one key/value pair! Customized breakpoints will be merged with default breakpoints when the player is created.

When the player’s size changes, the merged breakpoints will be inspected in the size order until a matching breakpoint is found.

That breakpoint’s associated class name will be added as a class to the player. The previous breakpoint’s class will be removed.

See the file sandbox/responsive.html.example for an example of a responsive player using the default breakpoints.

This option is inherited from the Component base class.

When true , the Video.js player will have a fluid size. In other words, it will scale to fit its container at the video’s intrinsic aspect ratio, or at a specified aspectRatio .

Also, if the element has the «vjs-fluid» , this option is automatically set to true .

Video.js indicates that the user is interacting with the player by way of the «vjs-user-active» and «vjs-user-inactive» classes and the «useractive» event.

The inactivityTimeout determines how many milliseconds of inactivity is required before declaring the user inactive. A value of 0 indicates that there is no inactivityTimeout and the user will never be considered inactive.

Type: string , Default: browser default or ‘en’

A language code matching one of the available languages in the player. This sets the initial language for a player, but it can always be changed.

Customize which languages are available in a player. The keys of this object will be language codes and the values will be objects with English keys and translated values.

Note: Generally, this option is not needed and it would be better to pass your custom languages to videojs.addLanguage() , so they are available in all players!

Allows the player to use the new live ui that includes:

• A progress bar for seeking within the live window
• A button that can be clicked to seek to the live edge with a circle indicating if you are at the live edge or not.

Without this option the progress bar will be hidden and in its place will be text that indicates LIVE playback. There will be no progress control and you will not be able click the text to seek to the live edge. liveui will default to true in a future version!

An option for the liveTracker component of the player that controls when the liveui should be shown. By default if a stream has less than 20s on the seekBar then we do not show the new liveui even with the liveui option set.

An option for the liveTracker component of the player that controls how far from the seekable end should be considered live playback. By default anything further than 15s from the live seekable edge is considered behind live and everything else is considered live. Any user interaction to seek backwards will ignore this value as a user would expect.

Explicitly set a default value for the associated tech option.

Specify whether setting autoplay: true and should be treated the same as autoplay: ‘play’ , i.e. the autoplay attribute should be removed from (or not added to) the video element and play() be initiated manually by Video.js rather than the browser.

Allows overriding the default message that is displayed when Video.js cannot play back a media source.

Control whether UI elements have a title attribute. A title attribute is shown on mouse hover, which can be helpful for usability, but has drawbacks for accessibility. Setting noUITitleAttributes to true prevents the title attribute from being added to UI elements, allowing for more accessible tooltips to be added to controls by a plugin or external framework.

fullscreen.options can be set to pass in specific fullscreen options. At some point, it will be augmented with element and handler for more functionality.

An array of numbers strictly greater than 0, where 1 means regular speed (100%), 0.5 means half-speed (50%), 2 means double-speed (200%), etc. If specified, Video.js displays a control (of class vjs-playback-rate ) allowing the user to choose playback speed from among the array of choices. The choices are presented in the specified order from bottom to top.

This supports having plugins be initialized automatically with custom options when the player is initialized — rather than requiring you to initialize them manually.

The above is roughly equivalent to:

Although, since the plugins option is an object, the order of initialization is not guaranteed!

See the plugins guide for more information on Video.js plugins.

Setting this to true will change fullscreen behaviour on devices which do not support the HTML5 fullscreen API but do support fullscreen on the video element, i.e. iPhone. Instead of making the video fullscreen, the player will be stretched to fill the browser window.

Setting this option to true will cause the player to customize itself based on responsive breakpoints (see: breakpoints option).

When this option is false (the default), responsive breakpoints will be ignored.

Note this is about the responsiveness of the controls within the player, not responsive sizing of the pplayer itself. For that, see fluid.

An array of objects that mirror the native element’s capability to have a series of child elements. This should be an array of objects with the src and type properties. For example:

Using elements will have the same effect:

If set to true, then the no compatible source error will not be triggered immediately and instead will occur on the first user interaction. This is useful for Google’s «mobile friendly» test tool, which can’t play video but where you might not want to see an error displayed.

Gives the possibility to techs to override the player’s poster and integrate into the player’s poster life-cycle. This can be useful when multiple techs are used and each has to set their own poster any time a new source is played.

Defines the order in which Video.js techs are preferred. By default, this means that the Html5 tech is preferred. Other registered techs will be added after this tech in the order in which they are registered.

Controls how clicking on the player/tech operates. If set to false , clicking is disabled and will no longer cause the player to toggle between paused and playing.

If undefined or set to true , clicking is enabled and toggles the player between paused and play. To override the default click handling, set userActions.click to a function which accepts a click event (in this example it will request Full Screen, the same as a userAction.doubleClick ):

Controls how double-clicking on the player/tech operates. If set to false , double-clicking is disabled. If undefined or set to true , double-clicking is enabled and toggles fullscreen mode. To override the default double-click handling, set userActions.doubleClick to a function which accepts a dblclick event:

Controls how player-wide hotkeys operate. If set to false , or undefined , hotkeys are disabled. If set to true or an object (to allow definitions of fullscreenKey etc. below), hotkeys are enabled as described below. To override the default hotkey handling, set userActions.hotkeys to a function which accepts a keydown event:

Default hotkey handling is:

Key	Action	Enabled by
f	toggle fullscreen	only enabled if a Fullscreen button is present in the Control Bar
m	toggle mute	always enabled, even if no Control Bar is present
k	toggle play/pause	always enabled, even if no Control Bar is present
Space	toggle play/pause	always enabled, even if no Control Bar is present

Hotkeys require player focus first. Note that the Space key activates controls such as buttons and menus if that control has keyboard focus. The other hotkeys work regardless of which control in the player has focus.

Override the fullscreen key definition. If this is set, the function receives the keydown event; if the function returns true , then the fullscreen toggle action is performed.

Override the mute key definition. If this is set, the function receives the keydown event; if the function returns true , then the mute toggle action is performed.

Override the play/pause key definition. If this is set, the function receives the keydown event; if the function returns true , then the play/pause toggle action is performed.

Allows overriding the default URL to vtt.js, which may be loaded asynchronously to polyfill support for WebVTT .

This option will be used in the «novtt» build of Video.js (i.e. video.novtt.js ). Otherwise, vtt.js is bundled with Video.js.

The Video.js player is a component. Like all components, you can define what children it includes, what order they appear in, and what options are passed to them.

This is meant to be a quick reference; so, for more detailed information on components in Video.js, check out the components guide.

If an Array — which is the default — this is used to determine which children (by component name) and in which order they are created on a player (or other component):

The children options can also be passed as an Object . In this case, it is used to provide options for any/all children, including disabling them with false :

Components can be given custom options via the lower-camel-case variant of the component name (e.g. controlBar for ControlBar ). These can be nested in a representation of grandchild relationships. For example, to disable the fullscreen control:

Video.js playback technologies (i.e. «techs») can be given custom options as part of the options passed to the videojs function. They should be passed under the lower-case variant of the tech name (e.g. «html5» ).

Only supported by the Html5 tech, this option can be set to true to force native controls for touch devices.

Can be set to false to disable native audio track support. Most commonly used with videojs-contrib-hls.

Can be set to false to force emulation of text tracks instead of native support. The nativeCaptions option also exists, but is simply an alias to nativeTextTracks .

Can be set to false to disable native video track support. Most commonly used with videojs-contrib-hls.

Can be set to false to delay loading of non-active text tracks until use. This can cause a short delay when switching captions during which there may be missing captions.

The default behavior is to preload all text tracks.

Источник