JQuery / JavaScript - change video src in iOS browsers

Eduard Unruh 0
Viewed 28
    <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?

html5-video ios jquery javascript
3 Answers

"This works on PC and Android browsers but not in iOS, any ideas?"

  • On Apple systems the preferred video format is MP4 not WebM.
  • Some browsers will forgive a wrong 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>
VC.One0

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>

IT goldman0

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.

Twisty0
Related