I'm a web developer for my school's housing office and I'm the only one working with their website. A few web developers back, they made a video player from scratch.
This is it, in its current form.
It's pretty long code wise and too long to post here.
For the most part, I understand how it works, but for whatever reason I can't get the second video to play correctly. The video starts at the beginning but the player starts at the end and the video ends early.
Picture of what you see when you click the play button
As far as I can tell, the code is good. I think it may be with the video itself, but I don't know how to fix it. Does anyone have any ideas?
So this is the code but I got rid of the other sections that held the other slides so that the code will fit here.
<!DOCTYPE html>
<html>
<!-- This player might be a little confusing. I'm writing
this to help whoever the next web dev is so they can
easily update this player with new videos-->
<!-- If you want to add a video to this player here are the steps:
1. Add functions to the Javascript
2. Add a image to the Marquee
3. Create a new section and add the text that is needed to it
4. Make sure you have both an MP4 and WEBM version of the new video uploaded somewhere so that every browswer can watch the video
-->
<head>
<!-- Added for analytics to work -->
<script src="//assets.adobedtm.com/9d799723fb681f246e7d4d8e9f3a613af54bd1c5/satelli
teLib-60cec8d99eb79ea3437496fb0faf6d17bf71f4b8.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
html,
body {
height: 360px;
width: 740px;
}
</style>
<script type="text/javascript" src="http://ift.tt/1dLCJcb"></script>
<script type="text/javascript" src="http://ift.tt/1JImWxM"></script>
<script type="text/javascript" src="http://ift.tt/1KbyTHf"></script>
<link href='http://ift.tt/1KbyTHh' rel='stylesheet' type='text/css'>
<script>
/*Javascript that controls the marquee*/
$(document).ready(function () {
$stopNFade = function () {
/* If you want to add a video to the player you need to */
/* add a function to all of these. */
document.getElementById('videoOne').pause();
document.getElementById('videoTwo').pause();
document.getElementById('videoThree').pause();
document.getElementById('videoFour').pause();
document.getElementById('videoFive').pause();
document.getElementById('videoSix').pause();
document.getElementById('videoSeven').pause();
document.getElementById('videoEight').pause();
document.getElementById('videoNine').pause();
$("#videoPlayerOne").fadeOut(1000);
$("#videoPlayerTwo").fadeOut(1000);
$("#videoPlayerThree").fadeOut(1000);
$("#videoPlayerFour").fadeOut(1000);
$("#videoPlayerFive").fadeOut(1000);
$("#videoPlayerSix").fadeOut(1000);
$("#videoPlayerSeven").fadeOut(1000);
$("#videoPlayerEight").fadeOut(1000);
$("#videoPlayerNine").fadeOut(1000);
try { // if movie is not loaded, try will avoid an error
document.getElementById('videoOne').currentTime = 0;
document.getElementById('videoTwo').currentTime = 0;
document.getElementById('videoThree').currentTime = 0;
document.getElementById('videoFour').currentTime = 0;
document.getElementById('videoFive').currentTime = 0;
document.getElementById('videoSix').currentTime = 0;
document.getElementById('videoSeven').currentTime = 0;
document.getElementById('videoEight').currentTime = 0;
document.getElementById('videoNine').currentTime = 0;
} catch (e) {
}
}
$("#videoOne").bind("ended", $stopNFade);
$("#videoTwo").bind("ended", $stopNFade);
$("#videoThree").bind("ended", $stopNFade);
$("#videoFour").bind("ended", $stopNFade);
$("#videoFive").bind("ended", $stopNFade);
$("#videoSix").bind("ended", $stopNFade);
$("#videoSeven").bind("ended", $stopNFade);
$("#videoEight").bind("ended", $stopNFade);
$("#videoNine").bind("ended", $stopNFade);
});
function playIEVideo(video) {
var innerH = "<object id=\"videoFlash\" type=\"application/x-shockwave-flash\" data=\"http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf\" width=\"640\" height=\"360\"><param name=\"movie\" value=\"http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf\"><param name=\"allowFullScreen\" value=\"true\"><param name=\"wmode\" value=\"transparent'\"><param name=\"flashVars\" value=\"config={'playlist':[{'url':'http://ift.tt/1JImYFG" + video + ".flv','autoPlay':true}]}\" file=\"http://ift.tt/1JImYFG" + video + ".flv\"></object>";
document.getElementById("forIE").innerHTML = innerH;
document.getElementById("forIE").style.zIndex = 10;
}
var isIE; //bool
if (browserName == "Microsoft Internet Explorer" && document.documentMode < 9) {
isIE = true;
} else {
isIE = false;
}
function playVideo(data) {
$scrollFunction();
var Num;
var Video;
switch (data) {
case 1:
Num = "One";
Video = "MyBrothersKeeper";
break;
case 2:
Num = "Two";
Video = "itsNotWhereYouLiveButHow";
break;
case 3:
Num = "Three";
Video = "apartmentCouncil";
break;
case 4:
Num = "Four";
Video = "light";
break;
case 5:
Num = "Five";
Video = "WoundedontheBattlefield";
break;
case 6:
Num = "Six";
Video = "StudentLivingHistoryandPrinciples";
break;
case 7:
Num = "Seven";
Video = "buildingZion";
break;
case 8:
Num = "Eight";
Video = "wardsStake";
break;
case 9:
Num = "Nine";
Video = "apartmentManager";
break;
default:
Num = false;
}
if (!Num) {
return;
}
if (isIE) {
playIEVideo(Video);
return;
}
$("#videoPlayer" + Num).fadeIn("fast");
var video = document.getElementById('video' + Num);
video.play();
}
</script>
<script>
$(document).ready(function () {
var scroll;
$(".main").onepage_scroll({
sectionContainer: "section",
pagination: false,
loop: true
});
$scrollQue = function () {
scroll = window.setInterval(function () {
$(".main").moveDown();
}, 10000);
};
$scrollFunction = function () {
window.clearInterval(scroll);
};
$scrollTo = function (data) {
$(".main").moveTo(data);
};
$stopIE = function () {
document.getElementById("forIE").innerHTML = "";
document.getElementById("forIE").style.zIndex = -10;
}
$scrollQue();
});
function scrollToOne() {
$stopIE();
$stopNFade();
$scrollTo(1);
$scrollFunction();
}
function scrollToOne() {
$stopIE();
$stopNFade();
$scrollTo(1);
$scrollFunction();
}
function scrollToTwo() {
$stopIE();
$stopNFade();
$scrollTo(2);
$scrollFunction();
}
function scrollToThree() {
$stopIE();
$stopNFade();
$scrollTo(3);
$scrollFunction();
}
function scrollToFour() {
$stopIE();
$stopNFade();
$scrollTo(4);
$scrollFunction();
}
function scrollToFive() {
$stopIE();
$stopNFade();
$scrollTo(5);
$scrollFunction();
}
function scrollToSix() {
$stopIE();
$stopNFade();
$scrollTo(6);
$scrollFunction();
}
function scrollToSeven() {
$stopIE();
$stopNFade();
$scrollTo(7);
$scrollFunction();
}
function scrollToEight() {
$stopIE();
$stopNFade();
$scrollTo(8);
$scrollFunction();
}
function scrollToNine() {
$stopIE();
$stopNFade();
$scrollTo(9);
$scrollFunction();
}
</script>
<style>
.videoPlayerDiv {
width: 740px;
height: 360px;
overflow: hidden;
}
#back {
width: 740px;
height: 360px;
}
.main {
position: absolute;
z-index: -1;
}
.main section {
width: 740px;
height: 360px;
}
.scrollHover {
z-index: 1;
}
.page1 {
background-image: url('http://ift.tt/1KbyUuJ');
}
.page2 {
background-image: url('http://ift.tt/1JImWO8 Living/StudentLivingPlayer/its_not_where_you_live_but_how_background.jpg');
}
.page3 {
background-image: url('http://ift.tt/1JImYFI');
}
.page4 {
background-image: url('http://ift.tt/1JImYFM');
}
.page5 {
background-image: url('http://ift.tt/1KbyUL3');
}
.page6 {
background-image: url('http://ift.tt/1JImYFO');
}
.page7 {
background-image: url('http://ift.tt/1KbyUL5');
}
.page8 {
background-image: url('http://ift.tt/1JImWOc');
}
.page9 {
background-image: url('http://ift.tt/1KbyWCM');
}
#videoPlayerOne {
display: none;
}
#ieWarning {
display: none;
width: 740px;
margin: auto;
text-align: center;
}
#playerMainBody {
/*left:104px;*/
border: 0px solid;
height: 360px;
width: 740px;
position: absolute;
z-index: 1;
}
.videoPlayer {
position: absolute;
width: 740px;
height: 360px;
background-color: black;
z-index: 2;
display: none;
}
#marquee {
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, .5);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=black, endColorstr=black);
float: right;
height: 360px;
width: 100px;
overflow: hidden;
z-index: 1;
}
#topScroll {
background-image: url('http://ift.tt/1JImWO8 Living/StudentLivingPlayer/topArrow.png');
height: 25px;
opacity: .0;
filter: alpha(opacity=0);
position: absolute;
right: 0px;
top: 0px;
width: 100px;
}
#bottomScroll {
background-image: url('http://ift.tt/1JImWO8 Living/StudentLivingPlayer/bottomArrow.png');
bottom: 0px;
height: 25px;
opacity: 1;
filter: alpha(opacity=75);
position: absolute;
right: 0px;
width: 100px;
}
#textBox {
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, .8);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=white, endColorstr=white);
border-radius: 5px;
height: 225px;
left: 30px;
position: absolute;
top: 30px;
width: 250px;
z-index: 1;
}
#textHeader {
color: white;
background: rgb(238, 113, 59);
background: rgba(238, 113, 59, .8);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#EE713B, endColorstr=#EE713B);
font-size: 16px;
text-align: center;
width: 65%;
margin: auto;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
font-family: helvetica;
}
#textTitle {
font-size: 26px;
padding: 5px;
text-align: center;
text-shadow: 0px 2px 2px #FFFFFF;
}
#textBody {
font-size: 15px;
padding: 5px;
text-align: center;
text-shadow: 0px 2px 2px #FFFFFF;
}
.textButton {
background-color: #ee713b;
border-radius: 5px;
bottom: 15px;
color: white;
cursor: pointer;
font-size: 24px;
left: 21%;
padding: 5px 10px 5px 10px;
position: absolute;
text-align: center;
width: 125px;
font-family: helvetica;
}
#mImage {
border-radius: 5px;
cursor: pointer;
margin-left: 10px;
margin-top: 5px;
opacity: 1;
}
.last {
margin-bottom: 5px;
}
#sharing {
position: absolute;
left: 585px;
top: 3px;
opacity: 0;
transition: opacity 1s ease-out;
-webkit-transition: opacity 1s ease-out;
}
.AMBox {
width: 235px !important;
}
.WSBox {
height: 210px !important;
}
.BZBox {
height: 210px !important;
}
.SLBox {
height: 205px !important;
}
.WBox {
height: 235px !important;
}
</style>
<!--[IF IE]>
<style>
#forIE {
width:740px;
height:360px;
position:absolute;
z-index:-10;
}
#ieWarning {
display:inherit;
}
</style>
<![endif]-->
</head>
<body>
<div id="playerMainBody" class="videoPlayerDiv">
<!-- Side marquee, when each image is clicked the player takes the user to the page that the image corresponds to -->
<div id="marquee">
<img id="mImage" class="last" onclick="scrollToOne()" src="http://ift.tt/1JImWO8 Living/StudentLivingPlayer/brothersKeeperThumbnail.jpg" />
<img id="mImage" class="first" onclick="scrollToTwo()" src="http://ift.tt/1JImWO8 Living/StudentLivingPlayer/its_not_where_you_live_but_how_marquee(0).jpg" />
<img id="mImage" class="second" onclick="scrollToThree()" src="http://ift.tt/1JImYFT" />
<img id="mImage" class="third" onclick="scrollToFour()" src="http://ift.tt/1JImWO8 Living/StudentLivingPlayer/lightThumbnail.jpg" />
<img id="mImage" class="fourth" onclick="scrollToFive()" src="http://ift.tt/1JImWO8 Living/StudentLivingPlayer/woundedBackgroundThumbnail.jpg" />
<img id="mImage" class="fifth" onclick="scrollToSix()" src="http://ift.tt/1JImWO8 Living/StudentLivingPlayer/presClarkThumbnail.png" />
<img id="mImage" class="sixth" onclick="scrollToSeven()" src="http://ift.tt/1JImWO8 Living/StudentLivingPlayer/buildingZionThumbnail.png" />
<img id="mImage" class="seventh" onclick="scrollToEight()" src="http://ift.tt/1JImWO8 Living/StudentLivingPlayer/wardStakeThumbnail.png" />
<img id="mImage" class="last" onclick="scrollToNine()" src="http://ift.tt/1JImWO8 Living/StudentLivingPlayer/apartmentManagerThumbnail.png" />
</div>
<!-- This holds all the pages for the player -->
<div class="main">
<div id="forIE">
</div>
<!-- Each page is the html for every section of the player that holds the textbox and image -->
<!-- HOW DO YOU LIVE? -->
<section class="page2">
<div id="videoPlayerTwo" class="videoPlayer">
<video id="videoTwo" width="640" height="360" oncontextmenu="return false;" controls="controls">
<source src="http://ift.tt/1KbyUL7" type="video/webm" />
<source src="http://ift.tt/1JImYFW" type="video/mp4" />
</video>
</div>
<div id="textBox" class="LBox">
<div id="textHeader">
STUDENT LIVING MESSAGES
</div>
<div id="textTitle" style="margin-top:-4px">
How Do You Live?
</div>
<div id="textBody" style="font-size: 15px;
padding: 5px 10px;">
“We no longer think of Zion as where we are going to live; we think of it as how we are going to live."
<br />
<br />–Elder Jeffrey R. Holland
</div>
<div id="video2" class="textButton" onclick="playVideo(2)">
Play Video
</div>
</div>
</section>
<!-- More sections for other videos -->
</div>
<div id="topScroll" class="scrollHover"></div>
<div id="bottomScroll" class="scrollHover"></div>
</div>
<div id="back"></div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire