Jump to content
Please Use CODE Tags

ClipByte Project

jameshumphries47
By jameshumphries47
in Programming
 Share
Posted

So hey guys my names James i'm 14, i'm on a mission to create a file sharing and viewing website over the next few months this thread will be my log fo what i have done day by day it may be daily or bi-daily posts.  i will be needing you guys to tell me errors and ways i can improve. stay tuned i will post my progress so far! 

thanks

~James

p.s follow so you can keep on track of my project and become part of it!!! the name is just a code name need a better name in the future

Check out my current projects: Selling site (Click Here)

If($reply == "for me to see"){

   $action = "Quote me!";

}else{

   $action = "Leave me alone!";

}

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

day one 

15 minutes on having a look on creating the basic video player, lots more work to do add volume full screen and skip... need to CSS, and tidy it up. here's the photo

post-38716-0-69616500-1418765610_thumb.p

Check out my current projects: Selling site (Click Here)

If($reply == "for me to see"){

   $action = "Quote me!";

}else{

   $action = "Leave me alone!";

}

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
<!DOCTYPE html><html><head><style type="text/css">div#video_player_box{ width:550px; background:#000; margin:0px auto;}div#video_controls_bar{ background: #333; padding:10px;}</style><script>var vid, playbtn, seekslider, curtimetext, durtimetext;function intializePlayer(){	// Set object references	vid = document.getElementById("my_video");	playbtn = document.getElementById("playpausebtn");	seekslider = document.getElementById("seekslider");	curtimetext = document.getElementById("curtimetext");	durtimetext = document.getElementById("durtimetext");	// Add event listeners	playbtn.addEventListener("click",playPause,false);	seekslider.addEventListener("change",vidSeek,false);	vid.addEventListener("timeupdate",seektimeupdate,false);}window.onload = intializePlayer;function playPause(){	if(vid.paused){		vid.play();		playbtn.innerHTML = "Pause";	} else {		vid.pause();		playbtn.innerHTML = "Play";	}}function vidSeek(){	var seekto = vid.duration * (seekslider.value / 100);	vid.currentTime = seekto;}function seektimeupdate(){	var nt = vid.currentTime * (100 / vid.duration);	seekslider.value = nt;	var curmins = Math.floor(vid.currentTime / 60);	var cursecs = Math.floor(vid.currentTime - curmins * 60);	var durmins = Math.floor(vid.duration / 60);	var dursecs = Math.floor(vid.duration - durmins *60);	if(cursecs < 10){		cursecs = "0"+cursecs;		}	if(dursecs <10){		dursecs = "0"+dursecs;	}	curtimetext.innerHTML = curmins+":"+cursecs;	durtimetext.innerHTML = durmins+":"+dursecs;}</script></head><body><div id="video_player_box">  <video id="my_video" width="632" height="352" autoplay>    <source src="test.mp4">  </video>  <div id="video_controls_bar">    <button id="playpausebtn">Pause</button>    <input id="seekslider" type="range" min="0" max="100" value="0" step="1">	<span id="curtimetext"></span> / <span id="durtimetext"></span>  </div></div></body></html> 

day 2, created a seek slider, and duration and current time display, got it to play mp4's but still need to work on the sizing.

Check out my current projects: Selling site (Click Here)

If($reply == "for me to see"){

   $action = "Quote me!";

}else{

   $action = "Leave me alone!";

}

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

day 8 been extremely ill and been unable to work on the project but i will start if i get time tomorrow.

Check out my current projects: Selling site (Click Here)

If($reply == "for me to see"){

   $action = "Quote me!";

}else{

   $action = "Leave me alone!";

}

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

day 12 so after recovering from a horrible illness i am able to start work again on my project, here she is in all her glory. today i coded volume slider, mute button and full screen button and then created test graphics for them. its starting to form. next step is to do some css (complete noob never done before in my life.) to position them other than that the only thing to do on the video player is to make the same work in full screen if anyone has any knowledge on this then please help im really stuck. again if anyone is interested in helping me in this project PM me and we can get started on it!! 

here is the code. 

<!DOCTYPE html><html><head><style type="text/css">div#video_player_box{ width:632px; background:#000; margin:0px auto;}div#video_controls_bar{ background: #333; padding:2px; color:#CCC; font-family:"Arial"}button#playpausebtn{	background:url(pause.png);	border:none;	width:19px;	height:22px;	cursor:pointer;	opacity:0.5;	}button#mutebtn{	background:url(full.png);	border:none;	width:19px;	height:22px;	cursor:pointer;	opacity:0.5;	}button#fullbtn{	background:url(fulls.png);	border:none;	width:19px;	height:22px;	cursor:pointer;	opacity:0.5;	}button#playpausebtn:hover{opacity:1;}button#mutebtn:hover{opacity:1;}button#fullbtn:hover{opacity:1;}	input#seekslider{ width:240px; }input#volumeslider {width:80px; }input[type='range'] {    -webkit-appearance: none !important;    background: #000;	border:#666 1px solid;    height:4px;}input[type='range']::-webkit-slider-thumb {    -webkit-appearance: none !important;    background: #FFF;    height:15px;    width:15px;	border-radius:100%;	cursor:pointer;}</style><script>var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider, fullbtn;function intializePlayer(){	// Set object references	vid = document.getElementById("my_video");	playbtn = document.getElementById("playpausebtn");	seekslider = document.getElementById("seekslider");	curtimetext = document.getElementById("curtimetext");	durtimetext = document.getElementById("durtimetext");	mutebtn = document.getElementById("mutebtn");	volumeslider = document.getElementById("volumeslider");	fullbtn = document.getElementById("fullbtn");		// Add event listeners	playbtn.addEventListener("click",playPause,false);	seekslider.addEventListener("change",vidSeek,false);	vid.addEventListener("timeupdate",seektimeupdate,false);	mutebtn.addEventListener("click",vidmute,false);	volumeslider.addEventListener("change",setvolume,false);	fullbtn.addEventListener("click",toggleFullScreen,false);}window.onload = intializePlayer;function playPause(){	if(vid.paused){		vid.play();		playbtn.style.background = "url(pause.png)";	} else {		vid.pause();		playbtn.style.background = "url(play.png)";	}}function vidSeek(){	var seekto = vid.duration * (seekslider.value / 100);	vid.currentTime = seekto;}function seektimeupdate(){	var nt = vid.currentTime * (100 / vid.duration);	seekslider.value = nt;	var curmins = Math.floor(vid.currentTime / 60);	var cursecs = Math.floor(vid.currentTime - curmins * 60);	var durmins = Math.floor(vid.duration / 60);	var dursecs = Math.floor(vid.duration - durmins *60);	if(cursecs < 10){ cursecs = "0"+cursecs;}	if(dursecs < 10){ dursecs = "0"+dursecs;}	if(curmins < 10){ curmins = "0"+curmins;}	if(durmins < 10){ durmins = "0"+durmins;}	curtimetext.innerHTML = curmins+":"+cursecs;	durtimetext.innerHTML = durmins+":"+dursecs;}function vidmute() {	if(vid.muted){		vid.muted = false;		mutebtn.style.background = "url(full.png)";		volumeslider.value = 100;	} else {		vid.muted = true;		mutebtn.style.background = "url(mute.png)";		volumeslider.value = 0;	}}function setvolume() {	vid.volume = volumeslider.value / 100;}function toggleFullScreen() {	if (vid.requestFullScreen){		vid.requestFullScreen () ;	}  else if(vid.webkitRequestFullScreen){		vid.webkitRequestFullScreen();	} else if(vid.mozRequestFullScreen) {		vid.mozRequestFullScreen();	}}</script></head><body><div id="video_player_box">  <video id="my_video" width="632" height="352" autoplay>    <source src="ifihadagun.mp4">  </video>  <div id="video_controls_bar">    <button id="playpausebtn"></button>    <input id="seekslider" type="range" min="0" max="100" value="0" step="1">	<span id="curtimetext"></span> / <span id="durtimetext"></span>	<button id="mutebtn"></button>	<input id="volumeslider" type="range" min="0" max="100" value="100" step="1">	<button id="fullbtn"></button>  </div></div></body></html>

post-38716-0-20376200-1419802419_thumb.p

Check out my current projects: Selling site (Click Here)

If($reply == "for me to see"){

   $action = "Quote me!";

}else{

   $action = "Leave me alone!";

}

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Nice start. If I was to suggest anything it would be to move your JS and CSS out of your .html file and in to their own dedicated .js and .css files. It will make your work easier to read and understand as it grows.

 

Also  you might like to take a look at the Bootstrap Glyphicons. It includes many great icons that can be used instead of taking time to make your own.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Nice start. If I was to suggest anything it would be to move your JS and CSS out of your .html file and in to their own dedicated .js and .css files. It will make your work easier to read and understand as it grows.

 

Also  you might like to take a look at the Bootstrap Glyphicons. It includes many great icons that can be used instead of taking time to make your own.

thank you for your help yeah i did think about that but really not sure to be quite honest im new to web development. for the time being i plan to leave the video code and not add to much to it, but yeah i see but that may cause copyright problems in the future, i will design new ones when i get the time, but the one i have are just test ones. at the moment im coding a login logout registration form and database :) (such fun... not) tbh i dont think anyone loves WAMP server but stay tuned over the next 24 hours i should have a login system coded, fingers crossed!

Check out my current projects: Selling site (Click Here)

If($reply == "for me to see"){

   $action = "Quote me!";

}else{

   $action = "Leave me alone!";

}

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

day 13 full days work, got wamp and phpmyadmin installed, all working nicely!! got some sort of positioning within the player, but the problem is when i minimize the window all the controls go funny (if anyone can help with this please please please pm me i need help) and i started work on the code of the login logout and so on.

here is the code for the video player.

<!DOCTYPE html><html><head><style type="text/css">div#video_player_box{ width:632px;background:#000; margin:0px auto;}div#video_controls_bar{ background: #333; padding:14px; color:#CCC; font-family:"Arial"}div#test{	position: absolute;	top:373px;	left:828px;}span.x{	position: absolute;	top:373px;	left:785px;}span.y{		position: absolute;	top:373px;	left:835px;}button#playpausebtn{	background:url(pause.png);	border:none;	width:19px;	height:22px;	cursor:pointer;	opacity:0.5;	position: absolute;	left:490px;	top:368px;	}button#mutebtn{	background:url(full.png);	border:none;	width:19px;	height:22px;	cursor:pointer;	opacity:0.5;	position: absolute;	top:368px;	left:940px;	}button#fullbtn{	background:url(fulls.png);	border:none;	width:19px;	height:22px;	cursor:pointer;	opacity:0.5;	position: absolute;	top:368px;	left:1070px;	}button#playpausebtn:hover{opacity:1;}button#mutebtn:hover{opacity:1;}button#fullbtn:hover{opacity:1;}	input#seekslider{ width:250px; 	position: absolute;	top:375px;	left:525px;}input#volumeslider {width:100px;		position: absolute;	top:373px;	left:960px;}input[type='range'] {    -webkit-appearance: none !important;    background: #000;	border:#666 1px solid;    height:4px;}input[type='range']::-webkit-slider-thumb {    -webkit-appearance: none !important;    background: #FFF;    height:15px;    width:15px;	border-radius:100%;	cursor:pointer;}</style><script>var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider, fullbtn;function intializePlayer(){	// Set object references	vid = document.getElementById("my_video");	playbtn = document.getElementById("playpausebtn");	seekslider = document.getElementById("seekslider");	curtimetext = document.getElementById("curtimetext");	durtimetext = document.getElementById("durtimetext");	mutebtn = document.getElementById("mutebtn");	volumeslider = document.getElementById("volumeslider");	fullbtn = document.getElementById("fullbtn");		// Add event listeners	playbtn.addEventListener("click",playPause,false);	seekslider.addEventListener("change",vidSeek,false);	vid.addEventListener("timeupdate",seektimeupdate,false);	mutebtn.addEventListener("click",vidmute,false);	volumeslider.addEventListener("change",setvolume,false);	fullbtn.addEventListener("click",toggleFullScreen,false);}window.onload = intializePlayer;function playPause(){	if(vid.paused){		vid.play();		playbtn.style.background = "url(pause.png)";	} else {		vid.pause();		playbtn.style.background = "url(play.png)";	}}function vidSeek(){	var seekto = vid.duration * (seekslider.value / 100);	vid.currentTime = seekto;}function seektimeupdate(){	var nt = vid.currentTime * (100 / vid.duration);	seekslider.value = nt;	var curmins = Math.floor(vid.currentTime / 60);	var cursecs = Math.floor(vid.currentTime - curmins * 60);	var durmins = Math.floor(vid.duration / 60);	var dursecs = Math.floor(vid.duration - durmins *60);	if(cursecs < 10){ cursecs = "0"+cursecs;}	if(dursecs < 10){ dursecs = "0"+dursecs;}	if(curmins < 10){ curmins = "0"+curmins;}	if(durmins < 10){ durmins = "0"+durmins;}	curtimetext.innerHTML = curmins+":"+cursecs;	durtimetext.innerHTML = durmins+":"+dursecs;}function vidmute() {	if(vid.muted){		vid.muted = false;		mutebtn.style.background = "url(full.png)";		volumeslider.value = 100;	} else {		vid.muted = true;		mutebtn.style.background = "url(mute.png)";		volumeslider.value = 0;	}}function setvolume() {	vid.volume = volumeslider.value / 100;}function toggleFullScreen() {	if (vid.requestFullScreen){		vid.requestFullScreen () ;	}  else if(vid.webkitRequestFullScreen){		vid.webkitRequestFullScreen();	} else if(vid.mozRequestFullScreen) {		vid.mozRequestFullScreen();	}}</script></head><body><div id="video_player_box">  <video id="my_video" width="632" height="352" autoplay>    <source src="ifihadagun.mp4">  </video>  <div id="video_controls_bar">    <button id="playpausebtn"></button>    <input id="seekslider" type="range" min="0" max="100" value="0" step="1">	<span id="curtimetext" class="x"></span><span id="durtimetext"class="y"></span>	<button id="mutebtn"></button>	<input id="volumeslider" type="range" min="0" max="100" value="100" step="1">	<button id="fullbtn"></button>		<div id="test"> / </div>  </div></div></body></html>

post-38716-0-18539500-1419879334_thumb.p

Check out my current projects: Selling site (Click Here)

If($reply == "for me to see"){

   $action = "Quote me!";

}else{

   $action = "Leave me alone!";

}

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

day 14, after 24 hours work on my login system i have given up and i will have to restart so yeah anyone interested in the project and wanna help out now is a good time!!! :P yeah i would fix 1 issue then i would need the code that i deleted and i would fix a error and i would end up with 5 more... so yeah. quite annoyed!

Check out my current projects: Selling site (Click Here)

If($reply == "for me to see"){

   $action = "Quote me!";

}else{

   $action = "Leave me alone!";

}

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

yeah i would fix 1 issue then i would need the code that i deleted and i would fix a error and i would end up with 5 more... so yeah. quite annoyed!

 

Welcome to the fun world of programming! 

 

It'll help you in the long run if you use versioning software (like Subversion or Git).

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Welcome to the fun world of programming! 

 

It'll help you in the long run if you use versioning software (like Subversion or Git).

not sure what versioning software is but im using sublime text 2 to code. normally i would keep going but coz im totally new to php i need to follow a tutorial :) 

Check out my current projects: Selling site (Click Here)

If($reply == "for me to see"){

   $action = "Quote me!";

}else{

   $action = "Leave me alone!";

}

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

day 16 i have gained assistance by somone on the forum who is of emmense help to me! website is comming along great just started work on a comments system!!!!

post-38716-0-65932700-1420131954_thumb.p

Check out my current projects: Selling site (Click Here)

If($reply == "for me to see"){

   $action = "Quote me!";

}else{

   $action = "Leave me alone!";

}

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×