How i do something like this?

Discussion in 'Web Design and Development' started by Rolandgs, Mar 17, 2013.

Thread Status:
Not open for further replies.
  1. Rolandgs, Mar 17, 2013
    Last edited by a moderator: Apr 3, 2013

    macrumors newbie

    Joined:
    Mar 15, 2013
    #1
    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
     
  2. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    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
     
  3. Rolandgs, Mar 18, 2013
    Last edited by a moderator: Apr 3, 2013

    thread starter macrumors newbie

    Joined:
    Mar 15, 2013
    #3
    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
     
  4. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #4
    Asked and answered including helpful links as to both the video and layout. ;)
     
  5. Rolandgs, Mar 18, 2013
    Last edited by a moderator: Apr 3, 2013

    thread starter macrumors newbie

    Joined:
    Mar 15, 2013
    #5
    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>
     
  6. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #6
    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.
     
  7. Rolandgs, Mar 19, 2013
    Last edited by a moderator: Apr 3, 2013

    thread starter macrumors newbie

    Joined:
    Mar 15, 2013
    #7
    Help to build

    Hello i need help to build this aplication[​IMG]
     
  8. macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #8
    You've already asked this question and been shown how to procede with your coursework :rolleyes:
     
  9. Rolandgs, Mar 19, 2013
    Last edited by a moderator: Apr 3, 2013

    thread starter macrumors newbie

    Joined:
    Mar 15, 2013
    #9
    i just dont know who to apply this code stuff. Its so confused
     
  10. macrumors member

    iPaintCode

    Joined:
    Jun 24, 2012
    Location:
    Metro Detroit
    #10
    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>
    
    
     
  11. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #11
    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:
     
  12. Rolandgs, Mar 21, 2013
    Last edited by a moderator: Apr 3, 2013

    thread starter macrumors newbie

    Joined:
    Mar 15, 2013
    #12
    Can you send me a video with your project working, and doing the stuff i need.
    Regards
    Roland
     
  13. macrumors 6502a

    TheGenerous

    Joined:
    Nov 14, 2010
    Location:
    I'm an Austronaut
    #13
    Orly? you could just work your ass off and learn, and fail, and iterate, and get supervised by your advisor. And then earned a diploma doing your work.
     
  14. rocknblogger, Mar 29, 2013
    Last edited by a moderator: Apr 3, 2013

    macrumors 68000

    rocknblogger

    Joined:
    Apr 2, 2011
    Location:
    New Jersey
    #14
    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.
     
  15. Rolandgs, Mar 30, 2013
    Last edited by a moderator: Apr 3, 2013

    thread starter macrumors newbie

    Joined:
    Mar 15, 2013
    #15
    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
     
  16. macrumors 68000

    rocknblogger

    Joined:
    Apr 2, 2011
    Location:
    New Jersey
    #16
    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.
     
  17. Rolandgs, Mar 31, 2013
    Last edited by a moderator: Apr 3, 2013

    thread starter macrumors newbie

    Joined:
    Mar 15, 2013
    #17
    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.

    ----------

    It will be great if you guys can help me with this problem i have in hands.
    Please help
     
  18. macrumors 6502a

    tekboi

    Joined:
    Aug 9, 2006
    Location:
    New Orleans ✈ WesŦward
    #18
    Seems it would take a while to learn how to do something from scratch in HTML5 like this...
     
  19. macrumors 68000

    rocknblogger

    Joined:
    Apr 2, 2011
    Location:
    New Jersey
    #19
    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?
     
  20. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #20
    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.
     
  21. Rolandgs, Apr 1, 2013
    Last edited by a moderator: Apr 3, 2013

    thread starter macrumors newbie

    Joined:
    Mar 15, 2013
    #21
    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.
     
  22. fig
    macrumors 6502a

    Joined:
    Jun 13, 2012
    Location:
    Houston, TX
    #22
    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.
     
Thread Status:
Not open for further replies.

Share This Page