Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

How i do something like this?

Status
Not open for further replies.
R

Rolandgs

macrumors newbie
Original poster
Mar 15, 2013
9
0
Hello, im new doing this kind of stuff, but i have a school project and i need to do something like this http://alma.arte.tv/en/webdoc/.

But this one is on vertical i need to put 3 movies on horizontal that does the same process.

Can anyone help me do build this.

How was this done, i have no idea.
I need to do in HTML5

Tks
 
Last edited by a moderator:
SrWebDeveloper

SrWebDeveloper

macrumors 68000
Dec 7, 2007
1,871
3
Alexandria, VA, USA
Rolandgs said:
Hello, im new doing this kind of stuff, but i have a school project and i need to do something like this http://alma.arte.tv/en/webdoc/.

But this one is on vertical i need to put 3 movies on horizontal that does the same process.

Can anyone help me do build this.

How was this done, i have no idea.
I need to do in HTML5

Tks
Click to expand...

First thing you need to know is Flash was used in that site you linked here. I assume by your last sentence you're not taking a Flash class and need to construct something similar using HTML5.

I'm not gonna do your homework for you, but to get you in the right direction once you got your 3 movies, say MP4's which is common today, look into the syntax used for the HTML5 object tag here:

http://www.w3schools.com/html/html_object.asp

Putting movies on a horizontal is easy enough, although 3 in a row can take up alot of screen real estate (did your teacher ask you to put all 3 on one page, or within a carousel, or linked from a menu and one at a time per page?). I assume you know basic CSS, if not read this novice tutorial about CSS: http://www.w3schools.com/css and learn how to float elements by reading this: http://www.w3schools.com/css/css_float.asp - after reading, what follows will make sense to you.

If 3 across on one page:

Create a container div and assign an ID, inside that div add 3 more div's each with a common class assigned. Float so they align properly horizontally. As designer you determine widths and margins of elements so each video looks good in whatever height/width of the format and aligned, spaced properly. All color, layout and styling is controlled in the CSS, the HTML is strictly for content.

Once you get rolling and generate both HTML and code, if you get stuck be sure to come back and either include a link to your page so far or show us both relevant code and CSS and explain what's wrong vs. what you expect.

Cheers.

:D
 
R

Rolandgs

macrumors newbie
Original poster
Mar 15, 2013
9
0
SrWebDeveloper said:
First thing you need to know is Flash was used in that site you linked here. I assume by your last sentence you're not taking a Flash class and need to construct something similar using HTML5.

I'm not gonna do your homework for you, but to get you in the right direction once you got your 3 movies, say MP4's which is common today, look into the syntax used for the HTML5 object tag here:

http://www.w3schools.com/html/html_object.asp

Putting movies on a horizontal is easy enough, although 3 in a row can take up alot of screen real estate (did your teacher ask you to put all 3 on one page, or within a carousel, or linked from a menu and one at a time per page?). I assume you know basic CSS, if not read this novice tutorial about CSS: http://www.w3schools.com/css and learn how to float elements by reading this: http://www.w3schools.com/css/css_float.asp - after reading, what follows will make sense to you.

If 3 across on one page:

Create a container div and assign an ID, inside that div add 3 more div's each with a common class assigned. Float so they align properly horizontally. As designer you determine widths and margins of elements so each video looks good in whatever height/width of the format and aligned, spaced properly. All color, layout and styling is controlled in the CSS, the HTML is strictly for content.

Once you get rolling and generate both HTML and code, if you get stuck be sure to come back and either include a link to your page so far or show us both relevant code and CSS and explain what's wrong vs. what you expect.

Cheers.

:D
Click to expand...

Hello, i need to put 3 movies on the same page, 1 movie with sound and the other without sound.
Like the movie i show to you, but that just have 2 movies and vertical .
I need to do the same process but with 3 movies horizontaly.

i will have a movie that does all the speach, and the other 2 just show some videos without sound, but when i change to another movie the principal one will stay on, and they need to play all together.
Do you understand what i want.
Tks
 
Last edited by a moderator:
R

Rolandgs

macrumors newbie
Original poster
Mar 15, 2013
9
0
SrWebDeveloper said:
Asked and answered including helpful links as to both the video and layout. ;)
Click to expand...

this is what i have done so far, but its not completly done, i what all 3 combined, with just 1 player.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Project 2013</title>
<style type="text/css">
#mainContent {

width: 3000px;
margin-right: auto;
margin-left: auto;
text-align: center;



}

#col1 {

margin: 0px;
float: left;
width: 944px;
height:611;


}

#col2 {

margin: 0px;
float: left;
width: 944px;
height:611;


}

#col3 {

margin: 0px;
float: left;
width: 944px;
height:611;


}

</style>
</head>

<body>
<div id="mainContent">

<div id="col1">
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="944" height="611" poster="my_video_poster.png"
data-setup="{}">
<source src="God of War 3 - Official Teaser Trailer [HD].mp4" type='video/mp4'>


</video>



</div>

<div id="col2">

<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="944" height="611" poster="my_video_poster.png"
data-setup="{}">
<source src="God of War 3 - Official Teaser Trailer [HD].mp4" type='video/mp4'>


</video>

</div>

<div id="col3">

<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="944" height="611" poster="my_video_poster.png"
data-setup="{}">
<source src="God of War 3 - Official Teaser Trailer [HD].mp4" type='video/mp4'>


</video>

</div>

<div id="clearance" style="clear:both;"></div>

</div>
</body>
</html>
 
Last edited by a moderator:
SrWebDeveloper

SrWebDeveloper

macrumors 68000
Dec 7, 2007
1,871
3
Alexandria, VA, USA
That's XHTML 1.0 transitional, not HTML5 which simply uses <html> tag.

Learn about DOCTYPE stuff here:

Nice job, otherwise, to get a basic 3 videos at once per page.

To switch between multiple videos in one player requires good knowledge of Javascript (or a framework like jQuery) and the video.js API. You'll need to embed all 3, hide what is not playing, create some HTML so a user can select which video or maybe link 3 thumbnail images of screen shots. The you'll assign a unique ID per video and use the API commands (Javascript) to unhide and play the proper video based on the active ID.

Details on the video.js API here: https://github.com/zencoder/video-js/blob/master/docs/api.md

I want to be clear, this is not novice level stuff.

Here is some code to demonstrate the video.js aspect (API usage), do not just copy/paste, edit to suit your needs and customize as you see fit:

Code: 
 _V_("example_video_1").ready(function(){
 
   var myPlayer = this;
 
   // EXAMPLE: Start playing the video.
   myPlayer.play();
});
 
myPlayer.src("http://www.example.com/path/to/video.mp4");
 
 
//or for multiple vid sources:
myPlayer.src([
    { type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" },
    { type: "video/webm", src: "http://www.example.com/path/to/video.webm" },
    { type: "video/ogg", src: "http://www.example.com/path/to/video.ogv" }
]);

This example uses the video.js API and is as simple as possible to show you the basics. The rest is up to you. I don't know your skill level as to Javascript so if you ask, "where do I put that code" or similar -- you need to learn Javascript before attempting this.

If you're wondering why I am using video.js it's because you referenced it in your above code, and I'd use it too! Good job there.
 
R

Rolandgs

macrumors newbie
Original poster
Mar 15, 2013
9
0
Help to build

Hello i need help to build this aplication
projecttester.jpg
 
Last edited by a moderator:
R

Rolandgs

macrumors newbie
Original poster
Mar 15, 2013
9
0
SrWebDeveloper said:
That's XHTML 1.0 transitional, not HTML5 which simply uses <html> tag.

Learn about DOCTYPE stuff here:

Nice job, otherwise, to get a basic 3 videos at once per page.

To switch between multiple videos in one player requires good knowledge of Javascript (or a framework like jQuery) and the video.js API. You'll need to embed all 3, hide what is not playing, create some HTML so a user can select which video or maybe link 3 thumbnail images of screen shots. The you'll assign a unique ID per video and use the API commands (Javascript) to unhide and play the proper video based on the active ID.

Details on the video.js API here: https://github.com/zencoder/video-js/blob/master/docs/api.md

I want to be clear, this is not novice level stuff.

Here is some code to demonstrate the video.js aspect (API usage), do not just copy/paste, edit to suit your needs and customize as you see fit:

Code: 
 _V_("example_video_1").ready(function(){

var myPlayer = this;

// EXAMPLE: Start playing the video.
myPlayer.play();
});

myPlayer.src("http://www.example.com/path/to/video.mp4");


//or for multiple vid sources:
myPlayer.src([
{ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" },
{ type: "video/webm", src: "http://www.example.com/path/to/video.webm" },
{ type: "video/ogg", src: "http://www.example.com/path/to/video.ogv" }
]);

This example uses the video.js API and is as simple as possible to show you the basics. The rest is up to you. I don't know your skill level as to Javascript so if you ask, "where do I put that code" or similar -- you need to learn Javascript before attempting this.

If you're wondering why I am using video.js it's because you referenced it in your above code, and I'd use it too! Good job there.
Click to expand...

i just dont know who to apply this code stuff. Its so confused
 
Last edited by a moderator:
iPaintCode

iPaintCode

macrumors regular
Jun 24, 2012
142
38
Metro Detroit
Rolandgs, not trying to be a smart aleck but you really should pick up these books and read the parts that you want to learn the most.

Definitive-Guide-HTML5-Experts-Development

JavaScript-Definitive-Guide

First off I wouldn't use video.js or the css file attached from your other thread example. I would first strip it down a little and use the browser video controls and then use basic JavaScript or jQuery.

I built this out on my local and it took me a few hours to get it somewhat working (got damn close but it's 2:30am), I would say this is beyond the scope of your JS knowledge (why I linked the books). You won't learn anything if I posted my example, you really should take SrWebDevelopers advice or even better, buy those books above and truly understand what you're doing.

You will have to detect the mouse x and set a threshold to have it start easing in to the viewpoint and then do some x pos math to set the volume (the more you expose the left or right video the higher the volume). Also you will need JavaScript to set the heights/widths and center if you plan on resizing the browser, which I assume you are.

I removed my JavaScript (not trying to be a jerk but if you want it you can paypal me for my time) but here's the example HTML:

Code: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Project 2013</title>
    <style>
    	* { /* ghetto-fied reset */
    		margin: 0;
    		padding: 0;
    	}
    	.vid-wrapper {
	    	width: 100%;
	    	height: auto; /* needs to be set by js */
	    	overflow: hidden;
	    	position: relative;
    	}
	    .vid-holder {
	    	position: absolute;
	    }
	    .vid-columns {
		    float: left;
	    }
	    .vid-columns:nth-child(2) { /* for testing */
	    	opacity: .5;
	    }
	    .vid-columns video { /* for testing */
	    	width: 100%;
	    	height: auto;
	    }
    </style>
</head>

<body>
	<div class="vid-wrapper"> <!-- Wrapper is the viewpoint -->
	    <div class="vid-holder"> <!-- Will be total width of all videos combined width and will need to use js to position center -->
	        <div class="vid-columns">
	            <video controls="" preload="auto">
	            	<source src="1.mp4" type='video/mp4'></source>
	            </video>
	       </div>

	        <div class="vid-columns">
	            <video controls="" preload="auto">
	            	<source src="2.mp4" type='video/mp4'></source>
	            </video>
	       </div>

	        <div class="vid-columns">
	            <video controls="" preload="auto">
	            	<source src="3.mp4" type='video/mp4'></source>
	            </video>
	       </div>
	    </div>
    </div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
	//removed
</script>
</body>
</html>
 
SrWebDeveloper

SrWebDeveloper

macrumors 68000
Dec 7, 2007
1,871
3
Alexandria, VA, USA
Rolandgs said:
i just dont know who to apply this code stuff. Its so confused
Click to expand...

To quote myself from earlier:

I don't know your skill level as to Javascript so if you ask, "where do I put that code" or similar -- you need to learn Javascript before attempting this.

You should have already read the other links I provided you, they are critical to all this. A basic Javascript (JS) tutorial: http://www.w3schools.com/js/default.asp

Two hints for you:

1) To keep things simple, put "<script> ...your JS goes here </script>" in the head area for this simple script. The tutorial also shows you how to link a script from an external filename.js which is another way to do it.

2) Spend all day if necessary using this JSFIDDLE, http://jsfiddle.net/swinginsam/NWbUG/ which is a demo of the HTML, CSS and JS to switch between 3 videos using Video.js. If you never user JSFIDDLE, look at how the code is organized, you can make changes to see how it works and customize (i.e. you might want to remove the formats other than .mp4 and your own content path). Use it not to copy/paste, but as a learning tool -- spend time looking at how the rel attribute is used in the buttons, how content path + target conveniently reference the video name and how a poster image is used in the same path. VERY cool example of how to simplify the whole thing.

Spend time studying and tinkering with the JSFIDDLE -- until it clicks in your brain and you finally get it.

** I basically am giving away the solution! **

:cool:
 
R

Rolandgs

macrumors newbie
Original poster
Mar 15, 2013
9
0
iPaintCode said:
Rolandgs, not trying to be a smart aleck but you really should pick up these books and read the parts that you want to learn the most.

Definitive-Guide-HTML5-Experts-Development

JavaScript-Definitive-Guide

First off I wouldn't use video.js or the css file attached from your other thread example. I would first strip it down a little and use the browser video controls and then use basic JavaScript or jQuery.

I built this out on my local and it took me a few hours to get it somewhat working (got damn close but it's 2:30am), I would say this is beyond the scope of your JS knowledge (why I linked the books). You won't learn anything if I posted my example, you really should take SrWebDevelopers advice or even better, buy those books above and truly understand what you're doing.

You will have to detect the mouse x and set a threshold to have it start easing in to the viewpoint and then do some x pos math to set the volume (the more you expose the left or right video the higher the volume). Also you will need JavaScript to set the heights/widths and center if you plan on resizing the browser, which I assume you are.

I removed my JavaScript (not trying to be a jerk but if you want it you can paypal me for my time) but here's the example HTML:

Code: 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Project 2013</title>
<style>
* { /* ghetto-fied reset */
margin: 0;
padding: 0;
}
.vid-wrapper {
width: 100%;
height: auto; /* needs to be set by js */
overflow: hidden;
position: relative;
}
.vid-holder {
position: absolute;
}
.vid-columns {
float: left;
}
.vid-columns:nth-child(2) { /* for testing */
opacity: .5;
}
.vid-columns video { /* for testing */
width: 100%;
height: auto;
}
</style>
</head>

<body>
<div class="vid-wrapper"> <!-- Wrapper is the viewpoint -->
<div class="vid-holder"> <!-- Will be total width of all videos combined width and will need to use js to position center -->
<div class="vid-columns">
<video controls="" preload="auto">
<source src="1.mp4" type='video/mp4'></source>
</video>
</div>

<div class="vid-columns">
<video controls="" preload="auto">
<source src="2.mp4" type='video/mp4'></source>
</video>
</div>

<div class="vid-columns">
<video controls="" preload="auto">
<source src="3.mp4" type='video/mp4'></source>
</video>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
//removed
</script>
</body>
</html>
Click to expand...
Can you send me a video with your project working, and doing the stuff i need.
Regards
Roland
 
Last edited by a moderator:
rocknblogger

rocknblogger

macrumors 68020
Apr 2, 2011
2,346
481
New Jersey
This is going to sound harsh but paying someone to do it is not the solution. In the end you won't learn anything even if you manage to pass the class. You've been given all the resources you need to get this done. If you're not "getting" it then either you aren't trying hard enough or this may not be for you. If you're going to school for this stuff I have to assume they would have already taught you the basics and given you enough information to complete this assignment. If that's the case then either you're being lazy or the information isn't sinking in, in which case you either have to study more or accept that this may not ever click for you.

I know that sounds harsh but you need to be honest with yourself and understand your own abilities.
 
Last edited by a moderator:
R

Rolandgs

macrumors newbie
Original poster
Mar 15, 2013
9
0
QUOTE=rocknblogger;17073572]This is going to sound harsh but paying someone to do it is not the solution. In the end you won't learn anything even if you manage to pass the class. You've been given all the resources you need to get this done. If you're not "getting" it then either you aren't trying hard enough or this may not be for you. If you're going to school for this stuff I have to assume they would have already taught you the basics and given you enough information to complete this assignment. If that's the case then either you're being lazy or the information isn't sinking in, in which case you either have to study more or accept that this may not ever click for you.

I know that sounds harsh but you need to be honest with yourself and understand your own abilities.[/QUOTE]

First off all im not studying informatics im electronics, and this year was give to all students a project, some electronics, some fix things etc etc, and they give me this crap, i never did somethings like this before, because im not learning this kind of stuff on the university, and i just have 7 hours a week, until 20 April to build this. And my instructor of the project doesnt know anything about programming etc etc, so i registry to this forum for you guys give me a help, i dont have time, to study this hard work. I know some professional never saw this kind of stuff before.
Regards
Roland
 
Last edited by a moderator:
rocknblogger

rocknblogger

macrumors 68020
Apr 2, 2011
2,346
481
New Jersey
Rolandgs said:
First off all im not studying informatics im electronics, and this year was give to all students a project, some electronics, some fix things etc etc, and they give me this crap, i never did somethings like this before, because im not learning this kind of stuff on the university, and i just have 7 hours a week, until 20 April to build this. And my instructor of the project doesnt know anything about programming etc etc, so i registry to this forum for you guys give me a help, i dont have time, to study this hard work. I know some professional never saw this kind of stuff before.
Regards
Roland
Click to expand...

Well now it makes sense why you're having such a hard time. But why in the world did he give you project that you haven't been taught how to accomplish? That's like going to culinary school and being asked to fix a carburetor.
 
R

Rolandgs

macrumors newbie
Original poster
Mar 15, 2013
9
0
rocknblogger said:
Well now it makes sense why you're having such a hard time. But why in the world did he give you project that you haven't been taught how to accomplish? That's like going to culinary school and being asked to fix a carburetor.
Click to expand...

Because, The university was instructed to find companies where we would work to make the project, but they just fine some companies, some about electronics and another about informatics, we are 20 students, for 20 companies, and 60% are nothing about electronics.

Now do you understand my problems.

----------
Rolandgs said:
Because, The university was instructed to find companies where we would work to make the project, but they just fine some companies, some about electronics and another about informatics, we are 20 students, for 20 companies, and 60% are nothing about electronics.

Now do you understand my problems.
Click to expand...

It will be great if you guys can help me with this problem i have in hands.
Please help
 
Last edited by a moderator:
rocknblogger

rocknblogger

macrumors 68020
Apr 2, 2011
2,346
481
New Jersey
Rolandgs said:
Because, The university was instructed to find companies where we would work to make the project, but they just fine some companies, some about electronics and another about informatics, we are 20 students, for 20 companies, and 60% are nothing about electronics.

Now do you understand my problems.
Click to expand...
Yes and no. If I understand correctly these companies are possible places of employment upon graduation. If that is the case why would you or your school bother trying to complete a project that you are not trained for?

Now lets say someone here helps you, the project gets finished, the company approves, then what happens if you get hired? You still won't be able to do work like this.

Does anyone else see the futility of this exercise? Or am I completely misunderstanding the situation?
 
SrWebDeveloper

SrWebDeveloper

macrumors 68000
Dec 7, 2007
1,871
3
Alexandria, VA, USA
I've been following this and believe what the OP is saying, but I have to add three comments which will be the last from me:

1) Yes, this is a futile exercise. The OP should have stated from the beginning they are willing to pay and seek a professional contract service or consultant to either do the job or sit down with them and tutor professionally.

2) Otherwise, the advice given was extremely pertinent, valuable and helpful and I want to remind the OP the "JSA Fiddle" page I included actually *is* the answer with HTML, JS and CSS there for tweaking and learning. Short of coding it for the OP (at the time only knowing they were a student doing a project for a class) that *was* the most we could do here, arguably.

3) The OP was wrong to re-post the request and ignore my advice to bump up response time in a second posting. Such behavior makes me less inclined to help people at all.

My final advice to the OP is to visit other sites where you can get developers to bid on work or seek contract help from LAMP developers. You've already cast your fishing pole on this forum, so all efforts are exhausted here. I encourage those following this to let it be, please, and move on. I am.
 
R

Rolandgs

macrumors newbie
Original poster
Mar 15, 2013
9
0
rocknblogger said:
Yes and no. If I understand correctly these companies are possible places of employment upon graduation. If that is the case why would you or your school bother trying to complete a project that you are not trained for?

Now lets say someone here helps you, the project gets finished, the company approves, then what happens if you get hired? You still won't be able to do work like this.

Does anyone else see the futility of this exercise? Or am I completely misunderstanding the situation?
Click to expand...

This is a school project, i will not be hired to work in the compayny, because this is not the objective, we are doing this kind of work, for us to see how is the work off the university, to show us what we will find after we complete the university. I will not get hired this is just a class for we learn how business works.
 
Last edited by a moderator:
fig

fig

macrumors 6502a
Jun 13, 2012
916
84
Austin, TX
I have to admit I find people getting mad because someone else won't do their work for them rather humorous, especially when they resort to name calling.
 
Status
Not open for further replies.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom