Link to home
Create AccountLog in
Avatar of pauledwardian
pauledwardian

asked on

Sharepoint video player html

Here is the code I have for sharepoint foundation 2010 to play a video but it does not work. Would some expert please take a look at it?
I was also going to see if there is a way for users browse to a video on their desktop and upload it and then play the video? Would someone please help me to add that feature?


<!DOCTYPE html>
<html>
<head>
<STYLE type="text/css">
#bar 
{
border: solid 1px black; 
width: 100%; 
margin-bottom: 5px
}

#position 
{
height: 15px;
color: white;
background: steelblue;

}

#mask
{
float: left;
	position: relative;
	padding: 10px;
	border: 5px solid #61625d;
	font-family: Arial, Helvetica, sans-serif;
	background: #000000;
	box-shadow: inset 0 15px 35px #535353;
}

#vcontrols
{
	position: relative;
	padding-top: 10px; 
	float: left;
	clear: both;
	width: 98.5%;

}
section {
		  display: block;
		}
	

.boldbuttons{
display: block;
float: left;
font: bold 13px Arial; /* Change 13px as desired */
line-height: 22px; 
height: 30px; 
padding-left: 8px; 
text-decoration: none;

}


.buttonspan{
display: block;
padding: 1px 8px 1px 8px; 
}

.buttonwrapper{ 
overflow: hidden; 
width: 100%;
}





 </STYLE>

</head>
<body>

<section>
<div id="mask">
<video id="video1" ontimeupdate="progressBar()">

<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
</video>

<div id="bar">
<div id="position"  >
</div>
</div>

<div id="vcontrols">

<button onclick="play()" class="boldbuttons"><span class="buttonspan">Play</span></button>
<button onclick="pause()" class="boldbuttons"><span class="buttonspan">Pause</span></button>
<button onclick="stop()" class="boldbuttons"><span class="buttonspan">Stop</span></button>
<button onclick="fast()" class="boldbuttons"><span class="buttonspan">Fast</span></button>
<button onclick="slow()" class="boldbuttons"><span class="buttonspan">Slow</span></button>

</div>

</div>
</section>


<script type="text/javascript">

function progressBar()
{
var position = document.getElementById("position");
var video=document.getElementById("video1");

var status=document.getElementById("progress");

position.style.width = (video.currentTime/video.duration * 100) + "%";

//status.innerHTML = (Math.round(video.currentTime*100)/100) + " sec";

}

function play()
{

var video=document.getElementById("video1");
video.play();

}


function pause()
{

var video=document.getElementById("video1");
video.pause();

}


function stop()
{

var video=document.getElementById("video1");
video.pause();
video.currentTime = 0;

}

function fast()
{

var video=document.getElementById("video1");
video.play();
video.playbackRate = 12;

}

function slow()
{

var video=document.getElementById("video1");
video.play();
video.playbackRate = 0.25;

}

function normal()
{

var video=document.getElementById("video1");
video.play();
video.playbackRate = 1;

}

</script>

</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Rainer Jeschor
Rainer Jeschor
Flag of Germany image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account