So I’m having this piece of code that do horizontal scroll and I have a view helper that write videojs video element on to the php file. When I try to scrub the video, it will just play from the start again, the pause and fullscreen button works, but the volume adjust when clicked will mute the sound, which is kinda like the same behavior as the progress bar-going straight to zero. Why? It works if it’s not in this horizontal scrolling element.
<?PHP
include("test/viewHelpers.php");?>
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src='http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js'></script>
<script src="js/video.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/video-js.css" type="text/css" media="screen" title="Video JS">
<script type="text/javascript">VideoJS.setupAllWhenReady();</script>
<style>
#container{width: 640px; height:360px; overflow:hidden; border:5px solid yellow;}
#content{width: 2200px;background-color: blue;position:relative;left:0px;}
.section{background-color: lightblue; width:640px; float: left; }
</style>
<script type="text/javascript">
$(function(){
$("#container").scrollTo($('#2'), 4000);
}
);
</script>
<title>Videojs Test</title>
</head>
<body>
<div id="container">
<div id="content">
<div class="section" id="1" style="width: 620px; height: 360px; left:0px">section one</div>
<div class="section" id="2" style="background-color:red; width: 620px; height: 360px; left: 640px">
<?php echo view_video_helper("video1-1") ?>
</div>
<div class="section" id="3" style="width: 620px; height: 360px; left: 1280px; background-color:green;">section three</div>
</div>
</div>
</body>
</html>
Try the new version of video.js and see if it makes any difference.