Question 36545 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

JQuery / JavaScript – change video src in iOS browsers

    <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?

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    "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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search