<div class="videoWrapper" onclick="clickVideo(this);" style="max-width: calc(100% - 2px);">
<video class="video videopreview">';
<source src="" type="video/webm" />';
</video>
</div>
$('.videopreview source').attr('src', 'https://file-examples.com/storage/fe783a5cbb6323602a28c66/2017/04/file_example_MP4_480_1_5MG.mp4');
esto funciona en navegadores de PC y Android pero no en iOS, ¿alguna idea?
"Esto funciona en navegadores de PC y Android, pero no en iOS, ¿alguna idea?"
type="video/webm" al usar un archivo MP4 (de type="video/mp4" ). Intente probar este ejemplo de código Javascript:
(No hay ningún dispositivo Apple aquí para probar, pero debería sugerirle una solución).
<!DOCTYPE html>
<html>
<body>
<div class="videoWrapper" onclick="clickVideo(this);" style="max-width: calc(100% - 2px);">
<video id="vidtest1" class="video videopreview">
<source src="" type="video/webm">
</video>
</div>
<script>
var vidPlayer;
//vidPlayer = document.getElementsByClassName("videopreview"); //If you prefer to access via Class name
vidPlayer = document.getElementById("vidtest1");
function clickVideo ( input )
{
alert("clicked Element was : " + input.className );
//alert("clicked Element was : " + input.id );
//# note: Do a "load()" after setting the "src" and correct format "type" ...
vidPlayer.src = "https://file-examples.com/storage/fe783a5cbb6323602a28c66/2017/04/file_example_MP4_480_1_5MG.mp4";
vidPlayer.type = "video/mp4";
vidPlayer.load();
}
</script>
</body>
</html>
prueba esto por favor
$('.videopreview').attr('src', 'https://file-examples.com/storage/fe783a5cbb6323602a28c66/2017/04/file_example_MP4_480_1_5MG.mp4');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="videoWrapper" onclick="clickVideo(this);" style="max-width: calc(100% - 2px);">
<video class="video videopreview" controls>
<source src="" type="video/webm" />
</video>
</div>
La modificación dinámica de un elemento de origen y su atributo cuando el elemento ya está insertado en un elemento de video o audio no tendrá ningún efecto. Para cambiar lo que se está reproduciendo, simplemente use el atributo src en el elemento multimedia directamente, posiblemente haciendo uso del método canPlayType() para elegir entre los recursos disponibles. En general, la manipulación manual de elementos de origen después de que el documento se haya analizado es un enfoque innecesariamente complicado.
http://dev.w3.org/html5/spec/Overview.html#the-source-element
Como se sugirió, debe cambiar el atributo en $('.videopreview') . También puede intentar reemplazar el elemento con una nueva etiqueta de video para ver si esto le da mejores resultados.
También puede ocultar etiquetas de video alternativas y simplemente cambiar cuál está visible a la vez.