D4mations.com

6. HTML5 Custom Video Player Controls JavaScript CSS Design Tutorial



Lesson Code: http://www.developphp.com/video/JavaScript/Video-Player-Controls-CSS-Design-Tutorial
6th and final part of customizing the HTML5 video controls. In this video we will show some design tips for customizing the video player to match your specific brand or site design. I want to remind everyone that HTML5, CSS3 and some JavaScript functionality cannot yet be depended on to work in all browser software the same. Once these technologies are standardized you can then depend on them to work across the board. Old browsers will most certainly not handle this code well, so we will discuss using browser prefixes and alternatives to the range slider component.

Original source

d4mer

, , , , , , ,

50 responses to “6. HTML5 Custom Video Player Controls JavaScript CSS Design Tutorial”

  9. for more style video player put code in css
    video#my_video{
    border: 0px solid;
    border-radius: 35px;}
    div{
    background-color:red;
    }
    div#video_player_box{background-color:red;
    border: 2px solid;
    border-radius: 25px;}
    div{
    background-color:red;
    border: 2px solid;
    border-radius: 25px;
    }
    input#volumeslider{
    background-color:red;
    border: 2px solid;
    border-radius: 25px;
    }
    button#mutebtn{
    background-color:red;
    border: 2px solid;
    border-radius: 25px;
    }
    button#fullscreenbtn{
    background-color:green;
    border: 2px solid;
    border-radius: 25px;
    }

  15. Hey guys, here something to think about how would you make play/pause in one line at 10:59? You can see the code Adam took 6-7 lines, perfectly fine tho, but today I was implementing exactly play/pause in 1line(not counting updating html 2 lines if we count updating html.

  21. You have a wonderful conciseness and clarity. I've learnt so much. Thank you. Got my player working, Firefox OK, Chrome OK, but IE looks like their style not mine. Hoped HTML5 would get rid of all this browser specific code after years of trying to code for all the browsers.

  36. Hello everyone is it possible to let visitors that come into my site upload their own videos? someone please help! i've been trying to figure this out for a long time now!! Thank you

  41. Adam, can you please do a tutorial on how to insert an image in an HTML 5 video tag. The image is a link and displays before the video plays, when the video is paused or when the video ends.

    Thanks.

  43. It might be better to have some of the players background color in your button images so you have a bigger target to click on. I don't think browsers make the transparent parts "click-able", so maybe just leave a strip between the rectangles of the "pause" button and it might be easier to use.  My 2 cents…   Great series.

  46. Adam, I just want say thank u for the time u devote to give free tutorials that benefit a large number of students n professionals. u probably have no idea how the work u do helps us.
    Very few people have that passion of sharing their knowledge with others and u r one of this few guys.
    Thanks once again.

Leave a Reply