HTML & Publishing2018. 11. 28. 19:11

Vimeo : Embedding background videos

https://help.vimeo.com/hc/en-us/articles/115011183028-Embedding-background-videos

If you are a Plus, PRO, Business, or Premium member, you can remove the play/pause button on your embedded background videos. To do this, add the following parameter to the end of the player URL in your embed code : background=1


Example Embed Code:

<iframe src="https://player.vimeo.com/video/76979871?background=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>


Adding this parameter will have the following effect: 

1. All player toggles and elements will be turned off (including the play/pause button!)

2. The video will automatically loop.

3. The video will be set to autoplay.

4. The video will be muted.


If you would like your video to play with sound, you can also add the muted=0 parameter to your embed code. For example: 

<iframe src="https://player.vimeo.com/video/76979871?background=1&muted=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>


Chrome and Safari have new autoplay restrictions in place that will restrict background videos that are set to automatically play with sound. Muted background videos will not be affected. For more about this, please see the Autoplay Restrictions section of this article. 


Please note that using the background parameter will override any embed settings currently associated with the video. However, those embed settings are not changed. If the parameter is removed, the existing embed settings will take affect once more. 


 


Vimeo : Autoplaying and looping embedded videos

https://help.vimeo.com/hc/en-us/articles/115004485728-Autoplaying-and-looping-embedded-videos


If you’d like your embedded video to autoplay or loop, go to the video you'd like to embed and click the "Share" button in the video player. In the window that opens, click the "Show options" link, and check the corresponding boxes next to "Loop this video," "Autoplay this video," or both. You can then copy the embed code.


You can also do this manually by adding the following parameters into your embed code:

loop=1

autoplay=1


If you have more than one video autoplaying on a particular page, you will also need to include this parameter:

autopause=0


So, for example, if you were embedding two autoplay, looping, videos on a page, the embed code for each would look like this:

<iframe src="https://player.vimeo.com/video/12345?autoplay=1&loop=1&autopause=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>



Autoplay Restrictions

If the autoplay parameter is present, our player will attempt to automatically begin playback. However, please note that some browsers specifically block autoplay. In these cases, your video will revert back to the original thumbnail and controls, requiring viewers to select play to start playback.


Autoplay is currently restricted in the following environments:

Safari version 11+ (Desktop)
- Documentation: https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/
- Policy:  Autoplaying videos must be muted. Viewers can choose to block or allow unmuted autoplay for specific domains on their setup (see here)


Chrome version 66+ (Desktop/Android)
- Documentation: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
- Policy: Autoplaying videos must be muted. Videos that are frequently visited by the viewer are permitted to autoplay with sound (based on Google’s scoring system)


iOS (Safari, other mobile browsers, apps)
- Documentation:https://webkit.org/blog/6784/new-video-policies-for-ios/
- Policy: Autoplaying videos must be muted.


Firefox (Desktop)
- Firefox does not enforce any autoplay limitations; however, viewers can manually disable autoplay by disabling the preference media.autoplay.true. On setups where this setting is disabled, the viewer will be required to press play to start playback.


Workarounds

There is no way to stop these autoplay restrictions; however, you can mute your video to ensure autoplay is always honored. Just add one of the following parameters to the end of the player URL in your embed code:  


?background=1: This parameter automatically disables all elements in the player (play bar, buttons, etc), autoplays, loops, and mutes your video on load. Please note: the background parameter is only supported for videos hosted by paid members. Learn more here.


?muted=1 This parameter will automatically mute your video on load. Once your video plays, viewers can manually un-mute by clicking on the volume bar within the player.


💡Important: Both of these parameters will force your video to load as muted in all browsers. Videos without audio tracks (or audio tracks without sound) will not be considered muted by browsers. In order to bypass autoplay restrictions, you must use one the embed parameters above. 


If you are experiencing an issue, or have any questions, please contact us.




Chrome's autoplay policies

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes


WEBKIT/SAFARI Auto-Play Policy:

https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/


FIREFOX Auto-Play Improvements:

https://www.ghacks.net/2018/09/21/firefox-improved-autoplay-blocking/

'HTML & Publishing' 카테고리의 다른 글

도메인 고정포워딩과 유동포워딩 태그  (0) 2019.01.26
디바이스별 해상도  (0) 2018.11.28
Vimeo/YouTube Parameters  (0) 2018.08.30
option 링크 걸기  (0) 2018.08.24
구글 맵 예제  (0) 2018.07.22
Posted by cpu21