JQuery / JavaScript - change video src in iOS browsers-CodePudding

    <div  onclick="clickVideo(this);" style="max-width: calc(100% - 2px);">
        <video >';
            <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?

CodePudding user response：

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  onclick="clickVideo(this);" style="max-width: calc(100% - 2px);">
  <video  controls>
    <source src="" type="video/webm" />
  </video>
</div>

CodePudding user response：

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.