Webkit Boy Webkit Boy - 7 months ago 30
Javascript Question

How to use bigvideo.js

I have used the bigvideo.js to see how it works so I downloaded an example from a site that shows how to use bigvideo.js . Here is the source code of my file but I don't know why it does not work at all!

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Create Video Backgrounds with BigVideo.js</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/bigvideo.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script src="scripts/modernizr-2.5.3.min.js"></script>
<!-- BigVideo Dependencies -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="scripts/jquery-1.8.1.min.js"><\/script>')</script>
<script src="scripts/jquery-ui-1.8.22.custom.min.js"></script>
<script src="http://vjs.zencdn.net/c/video.js"></script>

<!-- BigVideo -->
<script src="scripts/bigvideo.js"></script>
<script>
var BV,
isTouch = Modernizr.touch,
$window = $(window);

$(document).ready(function(){

if (!isTouch) {
// initialize BigVideo
BV = new $.BigVideo({forceAutoplay:isTouch});
BV.init();
showVideo();

BV.getPlayer().addEvent('loadeddata', function() {
onVideoLoaded();
});

// fix image alignment problem
adjustImagePositioning();
// repeat fix when window gets resized
$window.on('resize', adjustImagePositioning);
}

// Next button click goes to next div
$('#next-btn a').on('click', function(e) {
e.preventDefault();
$(".wrapper").animate({left:0-$window.width()},1000,function(){
$(".wrapper .screen:last-child").after($(".wrapper .screen:first-child"));
$(this).css({left:0});
showVideo();
})
});

$('#prev-btn a').on('click', function(e) {
e.preventDefault();
$(".wrapper .screen:first-child").before($(".wrapper .screen:last-child"));
$(".wrapper").css({left:0-$window.width()}).animate({left:0},1000,function(){
showVideo();
});
});

function showVideo() {
BV.show($('.wrapper .screen:nth-child(1)').attr('data-video'),{ambient:true});
$('.wrapper .screen .big-image').css({opacity:1});
}

function onVideoLoaded() {
$('.wrapper .screen:nth-child(1)').find('.big-image').animate({opacity:0},500);
}
});

function adjustImagePositioning() {
$(".big-image").each(function(){
var $img = $(this),img = new Image();
img.src = $img.attr('src');

var windowWidth = $window.width(),
windowHeight = $window.height(),
r_w = windowHeight / windowWidth,
i_w = img.width,
i_h = img.height,
r_i = i_h / i_w,
new_w, new_h, new_left, new_top;

if( r_w > r_i ) {
new_h = windowHeight;
new_w = windowHeight / r_i;
} else {
new_h = windowWidth * r_i;
new_w = windowWidth;
}

$img.css({
position: "absolute",
width : new_w,
height : new_h,
left : ( windowWidth - new_w ) / 2,
top : (( windowHeight - new_h ) / 2),
marginTop:-43
});
});
}
</script>
</head>
<body>
<header>
<h1>Create full-screen video backgrounds with BigVideo.js</h1>
</header>
<div class="wrapper">
<div class="screen" id="screen-1" data-video="video/video.mp4">
<!-- <img src="images/video1.jpg" class="big-image" /> -->
<h1 class="video-title">Video 1</h1>
</div>

</div>
<nav id="prev-btn">
<a href="#" class="icon-chevron-sign-left"></a>
</nav>
<nav id="next-btn">
<a href="#" class="icon-chevron-sign-right"></a>
</nav>
</body>
</html>


After I downloaded the file ,I haven't changed anything except commenting this:

<!-- <img src="images/video1.jpg" class="big-image" /> -->


And adding a video.mp4 to my video folder and changing the src directory here:

<div class="screen" id="screen-1" data-video="video/video.mp4">


So I wonder why it doesn't work. So if you know how to solve this problem ,please let me know!

Answer

Intead of that ,use this one:

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Fullscreen Video Backgrounds - Demo Page</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://www.templatemonster.com/favicon.ico">
  <link rel="icon" href="http://www.templatemonster.com/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="styles.css">
  <script type="text/javascript" src="js/jquery-1.10.0.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
  <script type="text/javascript" src="js/jquery.imagesloaded.js"></script>
  <script type="text/javascript" src="js/video.js"></script>
  <script type="text/javascript" src="js/bigvideo.js"></script>
</head>

<body>
  <div id="blockcontent">
    <h2>Beautiful Fullscreen Video BGs</h2>
    <p>All accomplished using the BigVideo.js jQuery plugin.</p>

    <p>Stock video footage is courtesy of <a href="http://beachfrontprod.blogspot.com/">Beachfront B-Roll</a>.</p>
  </div>

<script type="text/javascript">
/**
 * video source: http://beachfrontprod.blogspot.com/2011/09/random-footage-clip-2.html
 */
$(function() {
  var BV = new $.BigVideo({useFlashForFirefox:false});

  BV.init();
  BV.show('media/rochester-falls.mp4', {altSource:'media/river.ogv', ambient: true});
});
</script>
</body>
</html>
Comments