Learn 2 Programming: web design bootstrap video player

http://www.script-tutorials.com/

http://designmodo.com/

-------------------------------------------------
http://www.script-tutorials.com/category/html5-2/

http://designmodo.com/video-player/

http://www.script-tutorials.com/responsive-website-using-bootstrap/

Step 1. HTML

Before you start experimenting with BootStrap framework, let’s prepare a basic html model:

index.html

01<!DOCTYPE html>

02<html lang="en">

03<head>

04    <meta charset="utf-8" />

05    <meta name="author" content="Script Tutorials" />

06    <meta name="description" content="Responsive Websites Using BootStrap - demo page">

07    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

08    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

09    <title>Responsive Websites Using BootStrap | Script Tutorials</title>

10

11    <!-- css stylesheets -->

12    <link href="css/bootstrap.min.css" rel="stylesheet">

13    <link href="css/style.css" rel="stylesheet">

14</head>

15<body>

16

17    <!-- BODY PAGE CONTENT -->

18

19    <!-- add javascripts -->

20    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>

21    <script src="js/bootstrap.min.js"></script>

22</body>

23</html>

This is the minimal layout which enables the responsive nature of Twitter Bootstrap. In the header we included all the important meta tags and two CSS files, before the closing body, we added both: jQuery and the minimized bootstrap core. This speeds up the loading of the page. Now we can begin with every element of the page.

Top navigation menu

This menu is in the very top: this is fixed navigation bar. Here is the markup:

01<!-- fixed navigation bar -->

02<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">

03  <div class="container">

04    <div class="navbar-header">

05      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#b-menu-1">

06        <span class="sr-only">Toggle navigation</span>

07        <span class="icon-bar"></span>

08        <span class="icon-bar"></span>

09        <span class="icon-bar"></span>

10      </button>

11      <a class="navbar-brand" href="#">Bootstrap website</a>

12    </div>

13    <div class="collapse navbar-collapse" id="b-menu-1">

14      <ul class="nav navbar-nav navbar-right">

15        <li class="active"><a href="#">Menu 1</a></li>

16        <li><a href="#">Menu 2</a></li>

17        <li><a href="#">Menu 3</a></li>

18        <li class="dropdown">

19          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>

20          <ul class="dropdown-menu">

21            <li><a href="#">Option 1</a></li>

22            <li><a href="#">Option 2</a></li>

23            <li><a href="#">Option 3</a></li>

24          </ul>

25        </li>

26      </ul>

27    </div> <!-- /.nav-collapse -->

28  </div> <!-- /.container -->

29</div> <!-- /.navbar -->

Generally, it consists of three parts: the hidden button (for mobile device to open the menu), navbar-brand (brand/title) element, and UL-LI-based drop-down menu.

Slider

Right after the top menu, there is the slider: the carousel which turns its items. Its layout is quite familiar:

01<!-- slider -->

02<div id="slider" class="carousel slide" data-ride="carousel">

03  <!-- controls -->

04  <ol class="carousel-indicators">

05    <li data-target="#slider" data-slide-to="0" class="active"></li>

06    <li data-target="#slider" data-slide-to="1"></li>

07    <li data-target="#slider" data-slide-to="2"></li>

08  </ol>

09  <div class="carousel-inner">

10    <!-- slides -->

11    <div class="item active">

12      <div class="container">

13        <div class="carousel-caption">

14          <h1>Lorem ipsum - 1</h1>

15          <p>Lorem
 ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus 
massa. Nam quis purus sit amet augue iaculis dapibus non in nisi.<br />Sed sed volutpat neque. Nulla posuere.</p>

16          <p><a class="btn btn-lg btn-default" href="#" role="button">Button 1</a></p>

17        </div>

18      </div>

19    </div>

20    <div class="item">

21      <div class="container">

22        <div class="carousel-caption">

23          <h1>Lorem ipsum - 2</h1>

24          <p>Lorem
 ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus 
massa. Nam quis purus sit amet augue iaculis dapibus non in nisi.<br />Sed sed volutpat neque. Nulla posuere.</p>

25          <p><a class="btn btn-lg btn-primary" href="#" role="button">Button 2</a></p>

26        </div>

27      </div>

28    </div>

29    <div class="item">

30      <div class="container">

31        <div class="carousel-caption">

32          <h1>Lorem ipsum - 3</h1>

33          <p>Lorem
 ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus 
massa. Nam quis purus sit amet augue iaculis dapibus non in nisi.<br />Sed sed volutpat neque. Nulla posuere.</p>

34          <p><a class="btn btn-lg btn-warning" href="#" role="button">Button 3</a></p>

35        </div>

36      </div>

37    </div>

38  </div>

39  <!-- left-right controls -->

40  <a class="left carousel-control" href="#slider" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>

41  <a class="right carousel-control" href="#slider" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

42</div><!-- /.carousel -->

The familiar – this is because it contains quite usual elements: the ability to switch slides (indicators), the buttons back and forth, and the slides themselves.

Modal box

Modal boxes are quite an important part of the user interface, so we’ll create one modal box:

01<!-- modal box -->

02<div class="modal fade" id="my-modal-box" tabindex="-1" role="dialog" aria-labelledby="my-modal-box-l" aria-hidden="true">

03  <div class="modal-dialog">

04    <div class="modal-content">

05      <div class="modal-header">

06        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

07        <div class="modal-title" id="my-modal-box-l">

08          <h3>Share it</h3>

09        </div>

10      </div><!-- /.modal-header -->

11      <div class="modal-body">

12        <p>Share it box content</p>

13        <!-- You may add AddThis code here -->

14      </div><!-- /.modal-body -->

15    </div><!-- /.modal-content -->

16  </div><!-- /.modal-dialog -->

17</div><!-- /.modal -->

Second navigation menu

Finally we come to the main point – the main container which consists of the second navigation menu, footer and additional content blocks. The second menu is not fixed, this is a similar UL-LI-based menu, but the most right element calls the pre-made modal box:

01<!-- second menu bar -->

02<nav class="navbar navbar-default navbar-static">

03  <div class="navbar-header">

04      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#b-menu-2">

05          <span class="sr-only">Toggle navigation</span>

06          <span class="icon-bar"></span>

07          <span class="icon-bar"></span>

08          <span class="icon-bar"></span>

09      </button>

10      <a class="navbar-brand" href="http://www.script-tutorials.com/responsive-website-using-bootstrap/">Bootstrap website</a>

11  </div>

12

13  <!-- submenu elements for #b-menu-2 -->

14  <div class="collapse navbar-collapse" id="b-menu-2">

15    <ul class="nav navbar-nav">

16      <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>

17      <li><a href="#"><span class="glyphicon glyphicon-question-sign"></span> Help</a></li>

18      <li><a href="#"><span class="glyphicon glyphicon-exclamation-sign"></span> About</a></li>

19      <li class="dropdown">

20        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-list"></span> Other <b class="caret"></b></a>

21        <ul class="dropdown-menu">

22          <li><a href="#">Submenu 1</a></li>

23          <li><a href="#">Submenu 2</a></li>

24          <li><a href="#">Submenu 3</a></li>

25          <li><a href="#">Submenu 4</a></li>

26          <li class="divider"></li>

27          <li><a href="#">Submenu 5</a></li>

28          <li><a href="#">Submenu 6</a></li>

29          <li class="divider"></li>

30          <li><a href="#">Submenu 7</a></li>

31        </ul>

32      </li>

33    </ul>

34

35    <ul class="nav navbar-nav navbar-right">

36      <li data-toggle="modal" data-target="#my-modal-box"><a href="#"><span class="glyphicon glyphicon-share"></span> Share popup</a></li>

37    </ul>

38  </div><!-- /.nav-collapse -->

39</nav>

Two column layout with blocks

This section is quite huge, but it is rather simple: blocks are repeated. Just pay attention to my comments:

001<!-- 2-column layout -->

002<div class="row row-offcanvas row-offcanvas-right">

003  <div class="col-xs-12 col-sm-9">

004

005    <!-- jumbotron -->

006    <div class="jumbotron">

007      <h1>Lorem ipsum</h1>

008      <p>Lorem
 ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus 
massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed 
sed volutpat neque. Nulla posuere.</p>

009      <p><a role="button" href="#" class="btn btn-lg btn-success">Sign up today</a></p>

010    </div>

011

012    <div class="row">

013

014      <!-- column 1 -->

015      <div class="col-sm-6">

016

017        <!-- box 1 -->

018        <div class="panel panel-default">

019          <div class="panel-heading">

020            <h3 class="panel-title">Panel 1 title</h3>

021          </div>

022          <div class="panel-body">

023            <p>Lorem
 ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus 
massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed 
sed volutpat neque. Nulla posuere.</p>

024            <p><a class="btn btn-default right" href="#" role="button">Continue &raquo;</a></p>

025          </div>

026        </div>

027

028        <!-- box 2 -->

029        <div class="panel panel-primary">

030          <div class="panel-heading">

031            <h3 class="panel-title">Panel 2 title</h3>

032          </div>

033          <div class="panel-body">

034            <p>Lorem
 ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus 
massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed 
sed volutpat neque. Nulla posuere.</p>

035            <p><a class="btn btn-default right" href="#" role="button">Continue &raquo;</a></p>

036          </div>

037        </div>

038      </div> <!-- /column 1 -->

039

040      <!-- column 2 -->

041      <div class="col-sm-6">

042

043        <!-- box 3 -->

044        <div class="panel panel-success">

045          <div class="panel-heading">

046            <h3 class="panel-title">Panel 3 title</h3>

047          </div>

048          <div class="panel-body">

049            <p>Lorem
 ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus 
massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed 
sed volutpat neque. Nulla posuere.</p>

050            <p><a class="btn btn-default right" href="#" role="button">Continue &raquo;</a></p>

051          </div>

052        </div>

053

054        <!-- box 4 -->

055        <div class="panel panel-warning">

056          <div class="panel-heading">

057            <h3 class="panel-title">Panel 4 title</h3>

058          </div>

059          <div class="panel-body">

060            <p>Lorem
 ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus 
massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed 
sed volutpat neque. Nulla posuere.</p>

061            <p><a class="btn btn-default right" href="#" role="button">Continue &raquo;</a></p>

062          </div>

063        </div>

064      </div> <!-- /column 2 -->

065

066    </div><!--/row-->

067  </div><!--/span-->

068

069  <!-- column 3 (sidebar) -->

070  <div class="col-sm-3 sidebar-offcanvas" id="sidebar">

071    <div class="list-group" role="navigation">

072      <a href="#" class="list-group-item">Link</a>

073      <a href="#" class="list-group-item">Link</a>

074      <a href="#" class="list-group-item active">Link</a>

075      <a href="#" class="list-group-item">Link</a>

076      <a href="#" class="list-group-item">Link</a>

077    </div>

078

079    <!-- box 5 -->

080    <div class="panel panel-danger">

081      <div class="panel-heading">

082        <h3 class="panel-title">Form elements</h3>

083      </div>

084      <div class="panel-body">

085        <form role="form">

086          <div class="form-group">

087            <label for="emailField">Email address</label>

088            <input type="email" class="form-control" id="emailField" placeholder="Enter email">

089          </div>

090          <div class="form-group">

091            <label for="selectField">Type</label>

092            <select class="form-control" id="selectField">

093              <option>1</option>

094              <option>2</option>

095              <option>3</option>

096              <option>4</option>

097              <option>5</option>

098            </select>

099          </div>

100          <div class="progress progress-striped active">

101            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:30%">

102              <span class="sr-only">30% Complete</span></div>

103          </div>

104          <button type="submit" class="btn btn-default">Submit</button>

105        </form>

106      </div>

107    </div>

108

109    <!-- box 6 -->

110    <div class="panel panel-info">

111      <div class="panel-heading">

112        <h3 class="panel-title">Panel 6 title</h3>

113      </div>

114      <div class="panel-body">

115        <p>Lorem
 ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus 
massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed 
sed volutpat neque. Nulla posuere.</p>

116        <p><a class="btn btn-default right" href="#" role="button">Continue &raquo;</a></p>

117      </div>

118    </div>

119

120  </div><!-- /column 3 (sidebar) -->

121

122</div><!--/row-->

-------------------------------------------------------------------

http://designmodo.com/video-player/

<video width="640" height="267" poster="media/cars.png">

    <source src="media/cars.mp4" type="video/mp4">

</video>

Now we just need to add the following code to load the video controls and to set some settings. The settings that we will add are:

alwaysShowControls – true to always show the video controls and false to hide on mouse out.
videoVolume – to make the volume slider be horizontal.
features: ['playpause','progress','volume','fullscreen'] – here we’ll set what controls we want to add on the video.

For more settings take a look at “MediaElement.js” Documentation.

<script type="text/javascript">// <![CDATA[

$(document).ready(function() {

    $('video').mediaelementplayer({

        alwaysShowControls: true,

        videoVolume: 'horizontal',

        features: ['playpause','progress','volume','fullscreen']

    });

});

// ]]></script>

Step 3 – Video Basic Styles

Let’s start by adding some reset styles to the elements that we will use.

.mejs-inner,

.mejs-inner div,

.mejs-inner a,

.mejs-inner span,

.mejs-inner button,

.mejs-inner img {

    margin: 0;

    padding: 0;

    border: none;

    outline: none;

}

Learn 2 Programming

Search Google

Sunday, 14 September 2014

web design bootstrap video player