3.6 Integración de vídeo.

Las etiquetas <audio> y <vídeo> proporcionan apoyo para la reproducción de audio y vídeo sin necesidad de plug-ins. Codecs de vídeo y codecs de audio se utilizan para dichos elementos multimedia, y los diferentes codecs ofrecen diferentes niveles de compresión y calidad. Un formato de contenedor se utiliza para almacenar y transmitir el vídeo y el audio codificado juntos. Muchos codecs y formatos de contenedor existen, e incluso hay más combinaciones de ellos. Para su uso en la web, sólo un puñado de estos son relevantes.

Diferentes navegadores no soportan los mismos formatos para audio y vídeo en HTML5, principalmente debido a problemas de patentes. El área de formatos de medios en la web ha sufrido mucho por la ley de patentes en muchos paises, incluyendo EE.UU y la UE

Esto nos plantea una disyuntiva usamos el formato nativo de HTML5 o un plug-ins. Mostraremos aquí un bosquejo de ambas alternativas. Sin profundizar en estas.

Vídeos

Bootstrap tiene un buen conjunto de clases para incrustar vídeos de respuesta ysu correspondiente relación de aspecto en mútiples tamaños de dispositivos

Embedded 4:3 Responsive Aspect Ratio (YouTube video)


<!doctype html>
<html lang='es'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>4:3 RA</title>
  <meta name='Author' content='M.C. Jose Evaristo Pacheco Velasco' />
  <meta name='copyright' content='© 2009 2016 epacheco'>
  <meta name='date' content='Marzo 10, 2016' /> 
  <meta name='Description' content='Relacion de aspecto en vídeo youtube 4:3 con Bootstrap'>
  <meta name='Keywords' content='bootstrap, relacion, aspecto, jquery video' />
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
  <link href='../../images/favicon.ico' type='image/x-icon' rel='shortcut icon' />
  <link href='../../images/favicon.ico'  rel='icon' />
</head>
<body>
<div class='container'>
  <div class='row'>
    <div class='col-md-8 col-md-offset-2 '>
      <h4>4:3 Responsive Aspect Ratio</h4>
      <div class='embed-responsive embed-responsive-4by3'>
        <iframe class='embed-responsive-item' src='https://www.youtube.com/watch?v=dzsuE5ugxf4'></iframe>
     </div>
    </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>

Embedded 16:9 Responsive Aspect Ratio (YouTube video)


<!doctype html>  
<html lang='es'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>4:3 RA</title>
  <meta name='Author' content='M.C. Jose Evaristo Pacheco Velasco' />
  <meta name='copyright' content='© 2009 2016 epacheco'>
  <meta name='date' content='Marzo 10, 2016' /> 
  <meta name='Description' content='Relacion de aspecto en vídeo youtube 16:9 con Bootstrap'>
  <meta name='Keywords' content='bootstrap, relacion, aspecto, jquery video' />
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
  <link href='../../images/favicon.ico'  type='image/x-icon' rel='shortcut icon' />
  <link href='../../images/favicon.ico'  rel='icon' />
</head>
<body>
<div class='container'>
  <div class='row'>
    <div class='col-md-8 col-md-offset-2 '>
      <h4>4:3 Responsive Aspect Ratio</h4>
      <div class='embed-responsive embed-responsive-16by9'>
        <iframe class='embed-responsive-item' src='https://www.youtube.com/watch?v=dzsuE5ugxf4'></iframe>
      </div>
    </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>

Pero lo que si usted no está usando un <iframe> de YouTube, etc ... ? No te preocuoes sustituye iframe por el tag <video>.

Embedded 4:3 Responsive Aspect Ratio (your MP4 video)


<!doctype html> 
<html lang='es'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>4:3 RA</title>
  <meta name='Author' content='M.C. Jose Evaristo Pacheco Velasco' />
  <meta name='copyright' content='© 2009 2016 epacheco'>
  <meta name='date' content='Marzo 10, 2016' /> 
  <meta name='Description' content='Relacion de aspecto en vídeo youtube 4:3 con Bootstrap'>
  <meta name='Keywords' content='bootstrap, relacion, aspecto, jquery video' />
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
  <link href='../../images/favicon.ico' type='image/x-icon' rel='shortcut icon' />
  <link href='../../images/favicon.ico'  rel='icon' />
</head>
<body>

<div class='container'>
  <div class='row'>
    <div class='col-md-8 col-md-offset-2 '>
      <h4>4:3 Responsive Aspect Ratio MP4</h4>
      <div class='embed-responsive embed-responsive-4by3'>
        <video controls> 
          <!--replace this sample with your video-->    
          <source src="https://videoteca.uv.mx/video/uploads/1440546883videoregver2015.mp4" type="video/mp4">
        </video>
      </div> 
    </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>

JWPlayer

Desde la versión 6.4 este plugin soporta vídeo responsive. Es un estándar de facto en la industria de la reproducción de audio y vídeo

<!doctype html>
<html lang='es'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>jwplayer</title>
  <meta name='Author' content='M.C. Jose Evaristo Pacheco Velasco' />
  <meta name='copyright' content='© 2009 2016 epacheco'>
  <meta name='date' content='Marzo 19, 2016' /> 
  <meta name='Description' content='Relacion de aspecto en vídeo youtube 4:3 con Bootstrap'>
  <meta name='Keywords' content='bootstrap, relacion, aspecto, jquery video' />
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
</head>
<body>
<div class='container'>
  <div class='row'>
    <div class='col-md-8 col-md-offset-2 '>
      <h4 class="text-center">JW Player 6</h4>
        <div class='embed-responsive embed-responsive-4by3' id='mediaplayer'></div>
    </div>
  </div>
</div>
</body>

 Coloca aquí tus SCRIPT
</html>

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src="http://p.jwpcdn.com/6/10/jwplayer.js"></script>

<script>
    $(document).ready(function(){        
      jwplayer('mediaplayer').setup({
        playlist: [{
          file: 'https://youtu.be/ZuupMrAhGXw',
          title: 'Mi verdad',
          mediaid: '123456'
        },{
          file: 'https://www.youtube.com/watch?v=44kityInDvM',
          image: '',
          title: 'Bendita tu Luz',
          mediaid: '234567'
        }],
		width: "100%",
        aspectratio: "4:3"
      });
   });	
</script>