application/views/article/english/help.php

   1 <div id="video-widget-imagemap">
   2         <h1>Video Widget Snapshot</h1>
   3         <div><div class="ui-imagemap-image" style="margin: 0 auto; margin-bottom: 1em">
   4                 <img src="<?php echo site_url('img/nsvideo-widget.jpg') ?>" alt="NextShare Video Widget Screenshot" title="NextShare Video Widget Screenshot" width="446" height="353" />
   5         </div></div>
   6         <h4>Click on a component bellow to highlight it on the snapshot above and view a description of it:</h4>
   7
   8         <h1>Video Widget Components</h1>
   9         <div id="video-widget-titles">
  10                 <h3 class="ui-imagemap-title"
  11                                 data-left="5px" data-top="44px" data-width="433px" data-height="246px">
  12                         <a href="#">Watching Area</a>
  13                 </h3>
  14                 <div>
  15                         Here you can watch the video.
  16                 </div>
  17
  18                 <h3 class="ui-imagemap-title"
  19                                 data-left="3px" data-top="314px" data-width="32px" data-height="34px">
  20                         <a href="#"><em>Play</em> / <em>Pause</em> button</a>
  21                 </h3>
  22                 <div>
  23                         Toggle playing and pausing the video.
  24                 </div>
  25
  26                 <h3 class="ui-imagemap-title"
  27                                 data-left="41px" data-top="321px" data-width="39px" data-height="21px">
  28                         <a href="#">Current Time</a>
  29                 </h3>
  30                 <div>
  31                         View the time elapsed from the beginning of the video.
  32                 </div>
  33
  34                 <h3 class="ui-imagemap-title"
  35                                 data-left="86px" data-top="323px" data-width="57px" data-height="19px">
  36                         <a href="#">Total Time</a>
  37                 </h3>
  38                 <div>
  39                         View video duration.
  40                 </div>
  41
  42                 <h3 class="ui-imagemap-title"
  43                                 data-left="2px" data-top="295px" data-width="439px" data-height="22px">
  44                         <a href="#">Time Progress Slider</a>
  45                 </h3>
  46                 <div>
  47                         View a graphical representation of the time elapsed from the movie from its duration. You can also use this slider to seek current position in the video to a desired point.
  48                 </div>
  49
  50                 <h3 class="ui-imagemap-title"
  51                                 data-left="213px" data-top="320px" data-width="80px" data-height="24px">
  52                         <a href="#"><em>Volume</em> Slider</a>
  53                 </h3>
  54                 <div>
  55                         A graphical representation of the sound volume level which can be manipulated with the mouse in order change current volume.
  56                 </div>
  57
  58                 <h3 class="ui-imagemap-title"
  59                                 data-left="181px" data-top="313px" data-width="32px" data-height="36px">
  60                         <a href="#"><em>Mute</em> button</a>
  61                 </h3>
  62                 <div>
  63                         Use this button to alternatively disable or enable the sound for the video.
  64                 </div>
  65
  66                 <h3 class="ui-imagemap-title"
  67                                 data-left="293px" data-top="313px" data-width="119px" data-height="37px">
  68                         <a href="#">Switch Video Definition (Resolution)</a>
  69                 </h3>
  70                 <div>
  71                         <p>This group of check buttons show definitions available for the video. The definition characterizes its resolution (number of pixels on horizontal and vertical). A definition is coded here, as in television systems, with a number, representing the number of vertical pixels (height), and a "p", which is an abbreviation from <a href="http://en.wikipedia.org/wiki/Progressive_scan" rel="nofollow" target="_blank"><em>progressive scan</em></a>.</p>
  72                         <p>The number of vertical pixels depends on the <a href="http://en.wikipedia.org/wiki/Display_aspect_ratio" rel="nofollow" target="_blank"><em>display aspect ratio</em></a> which is usually 4:3 or 16:9. Because the video needs to fit in your browser its actual size (when not in Full Screen mode) will be between 640 and 1024 horizontal pixels.</p>
  73                 </div>
  74
  75                 <h3 class="ui-imagemap-title"
  76                                 data-left="6px" data-top="6px" data-width="134px" data-height="42px">
  77                         <a href="#">Switch Video Plugin</a>
  78                 </h3>
  79                 <div>
  80                         Use this two check buttons to switch between <a href="<?php echo site_url('about#next-share-video-plugins') ?>">the two NextShare plug-ins available</a>. Choose <em>HTML5</em> for <a href="<?php echo site_url('about#swarmplayer') ?>">SwarmPlayer</a> and <em>VLC</em> for <a href="<?php echo site_url('about#nextsharepc') ?>">NextSharePC</a>.
  81                 </div>
  82
  83                 <h3 class="ui-imagemap-title"
  84                                 data-left="407px" data-top="315px" data-width="35px" data-height="34px">
  85                         <a href="#"><em>Full Screen</em> button</a>
  86                 </h3>
  87                 <div>
  88                         Displays the video on the whole screen without having to be limited by the web page.
  89                 </div>
  90         </div>
  91
  92 </div>
  93
  94 <script type="text/javascript">
  95 $(function() {
  96         $('#video-widget-titles').accordion({
  97                 collapsible: true,
  98                 autoHeight: false,
  99                 active: false
 100         });
 101
 102         $('#video-widget-imagemap').imagemap({
 103
 104         });
 105 });
 106 </script>