HTML5 - Background Video - Versionsgeschichte

37.49.72.8 am 7. Dezember 2019 um 11:40 Uhr

2019-12-07T11:40:54Z

37.49.32.84 am 17. Juli 2017 um 11:04 Uhr

2017-07-17T11:04:13Z

37.49.32.84 am 14. Juli 2017 um 12:39 Uhr

2017-07-14T12:39:04Z

37.49.32.84: Die Seite wurde neu angelegt: „https://www.sitepoint.com/10-guidelines-better-website-background-videos/ == Settings == Stand 2017 * 720p * 24,25fps * bitrate test betw.750k and 1250k * max…“

2017-07-14T12:09:22Z

Die Seite wurde neu angelegt: „https://www.sitepoint.com/10-guidelines-better-website-background-videos/ == Settings == Stand 2017 * 720p * 24,25fps * bitrate test betw.750k and 1250k * max…“

Neue Seite

https://www.sitepoint.com/10-guidelines-better-website-background-videos/
== Settings ==
Stand 2017

* 720p
* 24,25fps
* bitrate test betw.750k and 1250k
* max 30-40s

== Tipps ==
* consider adding overlay via container or ::after
* slow movements
* contrast with text
* jQuery Background Video can handle size, pause after a while...

== Beispiel - jquery.background-video ==
jQuery Background Video

Instantly improve your HTML5 background videos with a single line of jQuery.

Built by the folks over at BG Stock - Premium HTML5 Background Videos.
What does the plugin do?

The plugin allows you to enhance your background videos in a few ways

Allows you to fade in your video when it starts playing (to avoid a sudden jump)
Emulates background-size: cover; / object-fit: cover;
Destroys the video and prevents it downloading on iOS devices (because they can't do background video)
Optionally auto-pause video after X seconds (easier on your users' power consumption)
Optionally add and position a pause/play button

Example: http://codepen.io/GusRuss89/pen/bVwNrE
Installation

With bower

bower install jquery-background-video

With npm

npm install --save jquery-background-video

With git

git clone https://github.com/BGStock/jquery-background-video

Or just download the zip
How do I use it?
1. Include the latest version of jQuery. E.g.

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

2. Include jquery.background-video.js

<script src="path/to/jquery.background-video.js"></script>

3. Add a <video> as the first child of the element that you want it to be the background for

<div class="element-with-video-bg jquery-background-video-wrapper">
<video class="my-background-video jquery-background-video" loop autoplay muted poster="path/to/your/poster.jpg">
<source src="path/to/video.mp4" type="video/mp4">
<source src="path/to/video.webm" type="video/webm">
<source src="path/to/video.ogv" type="video/ogg">
</video>
</div>

Note: the class names jquery-background-video and jquery-background-video-wrapper are only used in the CSS, just remember to update them there if you want to change them. The class name my-background-video is for demo purposes, this can be whatever you like.

If you're using the fade-in option you should also set the poster image as a background-image for your wrapper element.

.element-with-video-bg {
background-image: url(path/to/your/poster.jpg);
}

It's important to use background-image instead of the shorthand background because the plugin CSS sets background-position, background-repeat and background-size, which would be overwritten by the shorthand background.
4. Call the plugin on the video element

In your main JavaScript file

$(document).ready(function(){
$('.my-background-video').bgVideo();
});

OR

With a data attribute on the video tag

<video data-bgvideo="true" [other video params]>

5. (Recommended) include or copy/paste the CSS into your project

<link rel="stylesheet" type="text/css" href="path/to/jquery.background-video.css">

Options
Default options

$('.my-background-video').bgVideo({
fullScreen: false, // Sets the video to be fixed to the full window - your <video> and it's container should be direct descendents of the <body> tag
fadeIn: 500, // Milliseconds to fade video in/out (0 for no fade)
pauseAfter: 120, // Seconds to play before pausing (0 for forever)
fadeOnPause: false, // For all (including manual) pauses
fadeOnEnd: true, // When we've reached the pauseAfter time
showPausePlay: true, // Show pause/play button
pausePlayXPos: 'right', // left|right|center
pausePlayYPos: 'top', // top|bottom|center
pausePlayXOffset: '15px', // pixels or percent from side - ignored if positioned center
pausePlayYOffset: '15px' // pixels or percent from top/bottom - ignored if positioned center
});

All options can alternatively be specified in data attributes on your video tag with a bgvideo prefix. Just change camel casing to hyphens and lower case. E.g. fadeIn becomes data-bgvideo-fade-in.

<video data-bgvideo="true" data-bgvideo-fade-in="2000" [other video params]>

Overriding default options

Example

$.fn.bgVideo.defaults.fadeIn = 5000;
$.fn.bgVideo.defaults.showPausePlay = false;

== Beispiel - Fullscreen Video ==
.htaccess
<pre>
# Add Types for background videos
AddType video/mp4 .mp4 .m4v
AddType video/ogg .ogv
AddType video/webm .webm
</pre>
HTML
<syntaxhighlight lang="html5">
</syntaxhighlight>
CSS
<syntaxhighlight lang="css">
</syntaxhighlight>

← Nächstältere Version		Version vom 7. Dezember 2019, 11:40 Uhr
Zeile 1:		Zeile 1:
		+	Siehe auch [[HTML5 - Video]]
	https://www.sitepoint.com/10-guidelines-better-website-background-videos/		https://www.sitepoint.com/10-guidelines-better-website-background-videos/

@@ Zeile 17: / Zeile 17: @@
-== Beispiel - jquery.background-video ==
+== Beispiel 1 - Fullscreen Video ==
 jQuery Background Video
@@ Zeile 59: / Zeile 124: @@
 . Add a <video> as the first child of the element that you want it to be the background for
+<syntaxhighlight lang="html5">
 <div class="element-with-video-bg jquery-background-video-wrapper">
 	<video class="my-background-video jquery-background-video" loop autoplay muted poster="path/to/your/poster.jpg">
@@ Zeile 67: / Zeile 132: @@
 	</video>
 </div>
+</syntaxhighlight>
 Note: the class names jquery-background-video and jquery-background-video-wrapper are only used in the CSS, just remember to update them there if you want to change them. The class name my-background-video is for demo purposes, this can be whatever you like.
 If you're using the fade-in option you should also set the poster image as a background-image for your wrapper element.
+<pre>
 .element-with-video-bg {
 	background-image: url(path/to/your/poster.jpg);
+}
+</pre>
 It's important to use background-image instead of the shorthand background because the plugin CSS sets background-position, background-repeat and background-size, which would be overwritten by the shorthand background.
 . Call the plugin on the video element
 In your main JavaScript file
+<pre>
 $(document).ready(function(){
 	$('.my-background-video').bgVideo();
 });
+</pre>
 OR
 With a data attribute on the video tag
-<video data-bgvideo="true" [other video params]>
+ <video data-bgvideo="true" [other video params]>
 . (Recommended) include or copy/paste the CSS into your project
-<link rel="stylesheet" type="text/css" href="path/to/jquery.background-video.css">
+ <link rel="stylesheet" type="text/css" href="path/to/jquery.background-video.css">
 Options
 Default options
+<pre>
 $('.my-background-video').bgVideo({
 	fullScreen: false, // Sets the video to be fixed to the full window - your <video> and it's container should be direct descendents of the <body> tag
@@ Zeile 110: / Zeile 175: @@
 	pausePlayYOffset: '15px' // pixels or percent from top/bottom - ignored if positioned center
 });
+</pre>
 All options can alternatively be specified in data attributes on your video tag with a bgvideo prefix. Just change camel casing to hyphens and lower case. E.g. fadeIn becomes data-bgvideo-fade-in.
-<video data-bgvideo="true" data-bgvideo-fade-in="2000" [other video params]>
+ <video data-bgvideo="true" data-bgvideo-fade-in="2000" [other video params]>
 Overriding default options
 Example
+<pre>
 $.fn.bgVideo.defaults.fadeIn = 5000;
 $.fn.bgVideo.defaults.showPausePlay = false;
 </pre>

@@ Zeile 1: / Zeile 1: @@
 https://www.sitepoint.com/10-guidelines-better-website-background-videos/
 == Settings ==
 Stand 2017