Announcement

Collapse
No announcement yet.

using caption tag for video player on web page

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • using caption tag for video player on web page

    I want to add a caption to the bottom of each video player on my web page describing what the video is using the caption tag. I have managed to add the caption to the bottom of the video player. I would like the caption to be aligned on the left side of the video player for each video.
    Thank You


    <!doctype html>
    <html>
    <head>
    <title>html video</title>


    <body>


    <H1 align="center">WELCOME TO THE ASCNYC INTRANET WEBSITE</H1>
    <br>

    <H2 align="center">This site contains instructional videos that will assist you with accessing resources on the ASCNYC network</H2>
    <h2 align="center">Click the start button on the video that you want to view, then double click in the video itself to expand it to full screen.Then click the escape key or anywhere on the video to reduce it.</h2>

    <h3 align="center">If you have any suggestions for new videos, email the IT department at <a href="mailto:">IT@ascnyc.org</a>.

    <HR>
    <video id="rdweb.mp4" width="320" height="240" controls>
    <source src="rdweb_x264.mp4" type="video/mp4 " />
    <source src="rdweb_VP8.webm" type="video/webm" />
    <source src="rdweb_libtheora.ogv" type="video/ogg" />

    </video>




    <video id="testfor web" width="320" height="240" controls>
    <source src="testfor web_x264.mp4" type="video/mp4" />
    <source src="testfor web_libtheora.ogv" type="video/ogg" />
    <source src="testfor web_vp8.webm" type="video/webm" />
    </video>

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <video id="testfor web" width="320" height="240" controls>
    <source src="testfor web_x264.mp4" type="video/mp4" />
    <source src="testfor web_libtheora.ogv" type="video/ogg" />
    <source src="testfor web_vp8.webm" type="video/webm" />
    </video>



    <video id="testfor web" width="320" height="240" controls>
    <source src="rrr_pp_x264.mp4" type="video/mp4" />
    <source src="Room_Resource Reservation PP_libtheora.ogv" type="video/ogg" />
    <source src="Room_Resource Reservation PP_vp8.webm" type="video/webm" />
    </video>

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    </body>


    </head



    </html>


  • #2
    Hi there acenyc,

    here is one possible solution...

    Code:
    
    <!doctype html>
    <html>
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>html video</title>
    
    <style media="screen">
    body {
        background-color: #f0f0f0;
        font: 1em/1.6em verdana,arial,helvetica,san-serif;
     }
    
    #container {
        width: 90%;
        padding: 1em 1em 0.5em;
        margin: auto;
        border: 0.06em solid #999;
        background-color: #fff;
     }
    
    h1,h2 {
        text-align: center;
     }
    
    .row {
        display: flex;
        align-items: center; 
        padding: 0.5em 0 0.5em 0.5em;
        margin-bottom: 0.5em;
        border: 0.06em solid #999;
        background-color: #f0f0f0;
     }
    
    .row video {
        display: block;
        width: 38%;
        height:auto;
     }
    
    .row div {
        width: 12%;
        padding: 0.5em;
        margin: 0 0.5em;
        border: 0.06em solid #999;
        box-sizing: border-box;
        background-color: #fff;
        font-size: 0.8em;
        line-height: 1.3em;
     }
    
    @media screen and (max-width:65em) {
    
    .row {
        display: block;
        padding: 0.5em;
      }
    
    .row video {
        width: 100%;
     }
    
    .row div {
        width: 100%;
        margin: 0;
      }
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <h1>WELCOME TO THE ASCNYC INTRANET WEBSITE</h1>
    
    <h2>
     This site contains instructional videos that will assist 
     you with accessing resources on the ASCNYC network
    </h2>
    
    <p>
     Click the start button on the video that you want to view, 
     then double click in the video itself to expand it to full 
     screen.Then click the escape key or anywhere on the video 
     to reduce it.
    </p><p>
     If you have any suggestions for new videos, email the IT 
     department at <a href="mailto:">IT@ascnyc.org</a>.
    </p>
    
    <div class="row">
     <video controls>
      <source src="rdweb_x264.mp4" type="video/mp4">
      <source src="rdweb_VP8.webm" type="video/webm">
      <source src="rdweb_libtheora.ogv" type="video/ogg">
     </video>
     <div>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
      bibendum tempus faucibus quis mi. 
      </p>
     </div>
     <video controls>
      <source src="testfor_web_x264.mp4" type="video/mp4">
      <source src="testfor_web_libtheora.ogv" type="video/ogg">
      <source src="testfor_web_vp8.webm" type="video/webm">
     </video>
     <div>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
      bibendum tempus faucibus quis mi.
      </p>
     </div>
    <!-- .row --></div>
    
    <div class="row">
     <video controls>
      <source src="testfor_web_x264.mp4" type="video/mp4">
      <source src="testfor_web_libtheora.ogv" type="video/ogg">
      <source src="testfor_web_vp8.webm" type="video/webm">
     </video>
     <div>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
      bibendum tempus faucibus quis mi.
      </p>
     </div>
     <video controls>
      <source src="rrr_pp_x264.mp4" type="video/mp4">
      <source src="Room_Resource_Reservation_PP_libtheora.ogv" type="video/ogg">
      <source src="Room_Resource_Reservation_PP_vp8.webm" type="video/webm">
     </video>
     <div>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
      bibendum tempus faucibus quis mi.
      </p>
    </div>
    <!-- .row --></div>
    
    <!-- #container --></div>
    
    </body>
    </html>


    ~ the original bald headed old fart ~

    Comment


    • #3
      Thank You. When I get to work tomorrow, I will try it.

      Comment

      Working...
      X