-4 votos

adicionar video en bootstrap

Hola buen día tengo el siguiente problema tengo esta pagina web en boostrap, y quiero adicionar un video a la página, lo que pasa es que quiero reproducir siempre el vídeo, esto me funciono bien con la etiqueta vídeo y la propiedad autoplay loop, este se reproduce bien en mi computador pero cuando lo abro en mi celular el vídeo no se reproduce, no se ve el vídeo por ninguna parte, entonces lo que hice fue entrar a la pagina de boostrap y ahí leyendo la documentación oficial agrego el vídeo tal cual como explican ahí, lo abro en mi pc y este carga bien, y lo abro también en mi celular y este también se reproduce sin ningún problema pero ya no me funciona el autoplay para que siempre se reproduzca el vídeo sin necesidad de dar clic en el botón play del reproductor, a continuación dejo el código de ejemplo:

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title> Channel Center </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> <link rel="stylesheet" href="css/estilos.css"> <script> function playFile() { var video = $("#video_player"); video[0].src = "images/channelcenter.mp4"; video[0].load(); video[0].play(); }; </script> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> Channel Center </a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#"> Inicio <span class="sr-only"> Inicio </span></a></li> <li><a href="#"> Nosotros </a></li> <li><a href="#"> Galeria </a></li> <li><a href="#"> Videos </a></li> <li><a href="#"> Contacto </a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav><!--End navbar --> <!-- jumbotron --> <div class="jumbotron" id="header"> <div class="containervideo"> <div class="row"> <div class="col-sm-12"> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" id="video_player" src="images/channelcenter.mp4" autoplay="true" loop="true"></iframe> </div> </div> </div> </div><!--End containervideo --> </div><!--End jumbotron --> <div class="container"> <section> <div class="page-header" id="nosotros"> <h2> Misión <small> </small></h2> </div> <div class="row"> <div class="col-lg-4"> <blockquote> <p> </p> <footer> 02/05/2016 - Copyright </footer> </blockquote> </div> <div class="col-lg-4"> <blockquote> <p> </p> <footer> 02/05/2016 - Copyright </footer> </blockquote> </div> <div class="col-lg-4"> <blockquote> <p></p> </footer> </blockquote> </div> </section> </div> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="js/bootstrap.min.js"></script> </body> </html>

Muchas gracias a todos por sus respuestas....

3 votos

identa bien el coidgo y redacta bien la pregunta

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: