<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');
this works on PC and Android browsers but not in iOS, any ideas?
"This works on PC and Android browsers but not in iOS, any ideas?"
type="video/webm" when using MP4 file (of type="video/mp4").Try testing this example Javascript code:
(no Apple device here for testing, but it should hint you towards a solution).
<!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>
Try this please
$('.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>Dynamically modifying a source element and its attribute when the element is already inserted in a video or audio element will have no effect. To change what is playing, just use the src attribute on the media element directly, possibly making use of the canPlayType() method to pick from amongst available resources. Generally, manipulating source elements manually after the document has been parsed is an unncessarily[sic] complicated approach.
http://dev.w3.org/html5/spec/Overview.html#the-source-element
As was suggested, you should change the attribute on $('.videopreview'). You might also try replacing the element with a new Video tag to see if this give you better results.
You can also hide alternate video tags and just switch which is visible at a time.