The jQuery Plugin for Big Background Video (and Images)

Overview

BigVideo.js

####The jQuery Plugin for Big Background Video (and Images) Learn how to use this plugin on its demo page.

12-30-2015 Update

This project is no longer under active development. Much has changed since the summer of 2012 when BigVideo.js was launched. For more current information on implementing video backgrounds, check out these links:

If you are interested in taking over the project, ping me at @johnpolacek

Installation

If you're using Bower (and you should be!) installing BigVideo and its dependencies is simply:

bower install BigVideo.js

This downloads and installs BigVideo to the bower_components folder. Add to your page the usual way with script tags, or using RequireJS.

If you'd rather download things manually, you can grab the latest zip from that lovely button on the right (or this link). You will also need the dependencies:

Additionally, if you are using image functionality:

Options

The following are defaults on initialization:

    var BV = new $.BigVideo({
        // If you want to use a single mp4 source, set as true
        useFlashForFirefox:true,
        // If you are doing a playlist, the video won't play the first time
        // on a touchscreen unless the play event is attached to a user click
        forceAutoplay:false,
        controls:false,
        doLoop:false,
        container:$('body'),
        shrinkable:false
    });

RequireJS

If RequireJS is detected, BigVideo.js defines itself as an anonymous module. Require it as:

require(['path/to/bigvideo'], function(bigvideo) {
	// do stuff here
});

Make sure your require config is set up correctly; an example configuration is as follows:

require.config({
	paths: {
		"BigVideo": "bower_components/BigVideo.js/lib/bigvideo",
		"jquery": "bower_components/jquery/jquery",
		"jquery-ui": "bower_components/jquery-ui/ui/jquery-ui",
		"videojs": "bower_components/video.js/video",
		"imagesloaded": "bower_components/imagesloaded/imagesloaded",
		"eventEmitter/EventEmitter": "bower_components/eventEmitter/EventEmitter",
		"eventie/eventie": "bower_components/eventie/eventie"
	},
	shim: {
		"videojs": {exports: 'videojs'}
	}
});

This is to ensure that BigVideo and all its dependencies get the right paths, and that RequireJS knows how to reference Video.js.


Created by John Polacek

Follow @johnpolacek on Twitter


The MIT License (MIT) Copyright © 2012 John Polacek

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments
  • Wordpress Issue -

    Wordpress Issue - " TypeError: $.BigVideo is not a constructor "

    Hi, i'm trying to make it work on wordpress but it can't load it : when looking at debug console, it tells me :

    TypeError: $.BigVideo is not a constructor

    All paths to all .js files are ok (in a js folder) and i have tried with all plugins turn disabled but still the same error ; if you got any idea... thx

    opened by TomKzo 25
  • Video positionning bug in recent Chrome version

    Video positionning bug in recent Chrome version

    If you look at the demo page: http://dfcb.github.io/BigVideo.js/ you'll see the video is roughly in the middle of the browser window.

    It worked fine in previous versions of Chrome but it looks like they changed something in the latest version… Any idea how to fix this?

    opened by minimaldesign 17
  • Multiple videos in different containers

    Multiple videos in different containers

    Hi, apologies if this has been answered elsewhere...

    I'm using a combination of FullPage.js and BigVideo.js to add fullscreen panels of images and video as the user scrolls down the page. Loading a video into a container anywhere on the page works fine (thanks!), but when I try to load in another to a different container the

    This is what I'm calling:

    $(function() {

    var TEST1 = new $.BigVideo({useFlashForFirefox:false, container:$('.video-wrapper1')}); var TEST2 = new $.BigVideo({useFlashForFirefox:false, container:$('.video-wrapper2')});

    TEST1.init(); TEST2.show('vids/river.mp4',{ambient:true}); TES2.init(); TEST.show('vids/sherlockholmes.mp4',{ambient:true});

    });

    Am I calling the videos incorrectly? Does BigVideo support two videos in containers on the same page?

    Thanks so much Wil

    opened by wilgrace 12
  • Refactored BigVideo.show method and ...

    Refactored BigVideo.show method and ...

    separated playlist playback to BigVi...deo.showPlaylist

    BigVideo.show now accepts source as an array of video object with parameters type and src, like videoJS natively accepts them.

    Playlist playback is now accessible only via BigVideo.showPlaylist

    NOTE:

    • While this is not a breaking change, if users supplied only a video string to BigVideo.show it does change quite a bit of functionality
    • The playlist functionality has been moved to its own function
    • I haven't updated documentation pending feedback
    opened by kontur 11
  • BigVideo.js is not working in Firefox

    BigVideo.js is not working in Firefox

    I have implemented this for Chrome, Safari, and IE, but cannot get it to work in FF. I have tried the solutions here: https://github.com/dfcb/BigVideo.js/issues/49#issuecomment-60759179

    My current code is:

        var opts = {
          doLoop: true,
          useFlashForFirefox:false
        }
        var BV = new jQuery.BigVideo(opts), 
          videoPlayer, 
          isTouch = Modernizr.touch;
        BV.init();
        if ( !isTouch ) {
          BV.show([
            {type:"video/mp4", src:'http://player.vimeo.com/external/107089378.hd.mp4?s=7a714ca60ad1738ae8264e09c23a383b',ambient:true}
            ]);  
          BV.getPlayer().on('loadeddata', function() {
              $('#big-video-wrap').css({'display':'block'});
              $('#intro').css({'background':'transparent'});
          });
        }
      });
    

    (The on('loadeddata') call is to replace the static screenshot with the playing video. Firefox keeps the screenshot and never calls out to vimeo)

    opened by iamchrissmith 10
  • Direct Vimeo .mp4 link?

    Direct Vimeo .mp4 link?

    Call me crazy, but I can't seem to find a way to get a direct .mp4 link from vimeo? I'm using a pro account and I just get a variable number based when trying to find a direct link to a video.

    opened by nwill 9
  • Is BigVideo.js broken in Firefox?

    Is BigVideo.js broken in Firefox?

    I'm getting this error in the Firefox console:

    [10:20:59.847] ReferenceError: VideoJS is not defined @ http://dfcb.github.io/BigVideo.js/js/bigvideo.js:47

    ...and that's when I'm viewing the demo page. Same issue in the site I'm using BigVideo.js in. It works in Chrome and Safari.

    I've tested on multiple machines/OS's. Is this a known issue?

    opened by dmayman 9
  • More reliable altSource logic following VideoJS source array

    More reliable altSource logic following VideoJS source array

    Hey,

    I found the altSource parameter somewhat unreliable for what file type gets picked and clumsy for when you want to actually provide three file types, like you can do in VideoJS, e.g.

    vjs.src([
        { type: "video/webm", src: video.file + ".webm" },
        { type: "video/mp4", src: video.file + ".mp4" },
        { type: "video/ogg", src: video.file + ".ogv" }
    ]);
    

    I've made a rather opinionated hack for a project I am working on, where the BV.show() function accepts this kind of array as source and passes it along to the playVideo() method. If this is a desired feature for the main source I am more than willing to put together a PR for this.

    Any thoughts?

    opened by kontur 8
  • No Ogg and Webm support?

    No Ogg and Webm support?

    I thought Ogg and Webm was supported as fallback to mp4 since BigVideo.js is based on Video.js. Or maybe it is, but not mentioned in the docs?

    I would prefer Ogg/Webm fallback in addition to the Flash fallback.

    opened by olach 8
  • Adding play pause and Video sound mute-unmute.

    Adding play pause and Video sound mute-unmute.

    I got this script to work fine with my videos ,But I want to put some controls over video page to play-pause and mute- un mute videos with those controls, How can I implement this?

    opened by vivinblack 7
  • Modernizr.touch and ambient failing on ipad mini

    Modernizr.touch and ambient failing on ipad mini

    The site is mattcorey.thesrpr.com. I copied the instructions to show an image on a touch device and for the video to be in ambient mode. Works perfectly on my desktop. I can see/hear the video (which neither should happen) when I view on my ipad

    opened by zzramesses 7
  • First, Awesome Code! / Issues with the new Chrome version 66 / Video auto play without sound not working

    First, Awesome Code! / Issues with the new Chrome version 66 / Video auto play without sound not working

    Description

    Briefly describe the issue. Hi, Thank for creating such an awesome piece of code. I have been rocking it on all our sites for over a year with zero issues. More recently with chromes anti-auto play stuff, it seems like this code may have gotten caught in the crossfire.

    Steps to reproduce

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

    1. Go to https://www.nioralsurgery.com/
    2. Just watch the video load and pause on the first frame

    You can see the same result on a few of our sites. Built the same way. They all stopped working together. https://amarillooralsurgery.com https://www.mtstateoms.com/ https://nalortho.com/

    Results

    Expected

    The video to keep playing over and over

    Actual

    Currently, it's just passing on the first frame. You can see what I want it to look like if you click on any page off the homepage then click the homepage link to get back to the homepage.

    Error output

    video.min.js?ver=5.0.2:16 Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.

    This seems to be acting as though my video has audio when it does not.

    Additional Information

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

    versions

    videojs

    what version of videojs does this occur with? 5.0.2

    browsers

    Chrome

    OSes

    Current version os OSX

    plugins

    Nope

    opened by gera3d 3
  • Fix broken headings in Markdown files

    Fix broken headings in Markdown files

    GitHub changed the way Markdown headings are parsed, so this change fixes it.

    See bryant1410/readmesfix for more information.

    Tackles bryant1410/readmesfix#1

    opened by bryant1410 0
  • As reported by one of my users, sometimes this happens

    As reported by one of my users, sometimes this happens

    I have no ide what could cause this. I've installed Firefox ver. 42 which he said he was using, but not get any simmilar results.

    Can I fix it somehow?

    opened by CerxMe 1
  • Stack div's below.

    Stack div's below.

    Any good idea/solution for the following:

    I want the full video background player. I have defined several divs. The first div should be 100% the browser view height. The other divs should be stacked below the first div. When scrolling the background player keeps the same full-screen position. I just don't want the other div's appear until scrolling down.

    I notices someone asked the same question at : http://stackoverflow.com/questions/29298489/bigvideo-js-stack-divs-over-and-under-bigvideo-container

    Just the answer given does not solve the issue.

    Many thanks in advance.

    opened by rolero 0
  • setting video to parallax

    setting video to parallax

    I have a site that im looking to add an event to my bg video that pauses the video and then makes it parallax. I dont want to show the poster, I want to pause the video where its at and conditionally make it parallax, and then switch back on a separate (click) event I have tried passing in a class to the video wrapper and the video element which sets background-attachment:fixed, but its not making the change.

    opened by andrit 0
Owner
John Polacek
Front End at Narrativ. Based in Chicago. johnpolacek.com
John Polacek
This plugin can generate timestamps for video, audio and Bilibili video, it takes you to the corresponding video/audio position when clicked.

logseq-plugin-media-ts 本插件能够生成视频、音频以及 B 站视频的时间戳,点击时间戳后会跳转到对应的音视频位置。 This plugin can generate timestamps for video, audio and Bilibili video, it takes

Seth Yuan 58 Jan 3, 2023
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Minimalistic portfolio/photography site with masonry grid, page transitions and big images.

Gatsby Starter Portfolio: Emilia Minimalistic portfolio/photography site with masonry grid, page transitions and big images. Themeable with Theme UI.

Cryptob3auty 1 May 20, 2022
Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries.

Image Zoom (jQuery) Plugin Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries that is less th

Mario Duarte 8 Aug 3, 2022
Use real-time computing technology and web technology to build a big data Kanban l to solve the problem. Among them, practical technologies include MySQL, Kafka, Flink, Redis, Flask and Echarts

实时计算(English Version) 运用实时计算技术、Web 技术构建一个大数据看板来解决问题。其中实用技术包括Mysql、Kafka、Flink、Redis、Flask和Echarts 目录 1.问题需求 2.方案分析 3.安装环境 4.环境启动命令和运行代码的方法 5.代码目录结构说明

Serendipity 2 Jan 8, 2022
Big Chief is a website where you find and share everyday cooking inspiration. Discover recipes, cooks, videos, and how-tos based on the food you love.

Big Chief Big Chief is a website where you find and share everyday cooking inspiration. Discover recipes, cooks, videos, and how-tos based on the food

AVLESSI Matchoudi 7 Jun 1, 2022
A Big Picture, Thesaurus, and Taxonomy of Modern JavaScript Web Development

Spellbook of Modern Web Dev A Big Picture, Thesaurus, and Taxonomy of Modern JavaScript Web Development This document originated from a bunch of most

Dexter Yang 15.6k Dec 31, 2022
An IoT bottle that tracks water consumption. Winner of Best Health Hack, MLH's Best Hardware Hack, and QB3's Best Big Data for the Improvement of Health Care Winner at CruzHacks 2022.

An IoT bottle that tracks water consumption. Winner of Best Health Hack, MLH's Best Hardware Hack, and QB3's Best Big Data for the Improvement of Health Care Winner at CruzHacks 2022.

Nathanael Garza 2 Jan 21, 2022
WaffleHacks 2022 - Winner of 'Dream Big and Create More Cheers with AB InBev' & Honorable Mention for the Food Insecurity Track

Getting Started with Create React App Welcome to Leftover Marketplace. This is our project for WaffleHacks 2022. Links Presentation and Demo Video Web

Geer 3 Dec 27, 2022
A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item.

Letter Shuffle Animation for a Menu A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item

Codrops 29 Dec 4, 2022
Small utilities for big decimal numbers.

dnum dnum (Decimal Numbers) is a library that allows to operate on large numbers represented as a pair composed of a BigInt for the value, and a Numbe

Pierre Bertet 45 Dec 21, 2022
Console app - big float calculator <*/+->

Интерпритатор математических выражений Изначально для парсинга математических выражений я реализовал алгоритм сортировочной станции, в текущей версии

Daniil 3 Jul 16, 2022
Incredible drastically simplifies creation of developer video content. It offers a unified workflow to storyboard, record, collaborate and produce the video.

?? Introduction Incredible drastically simplifies creation of developer video content. It offers a unified workflow to storyboard, record, collaborate

Incredible 113 Dec 6, 2022
A simple cli-app that allows you to divide a YouTube video into multiple separate videos base on a video's time stamps. Powered by pkg and yt-scissors library.

YouTube-Scissors CLI A simple CLI app that allows you to divide a YouTube video into multiple separate videos base on a video's time stamps. This proj

Gabe 23 Nov 8, 2022
Easiest 1-click way to install and use Stable Diffusion on your own computer. Provides a browser UI for generating images from text prompts and images. Just enter your text prompt, and see the generated image.

Stable Diffusion UI Easiest way to install and use Stable Diffusion on your own computer. No dependencies or technical knowledge required. 1-click ins

null 3.5k Dec 30, 2022