Note that there are some explanatory texts on larger screens.

plurals
  1. POSwitching video source on iPad with jQuery
    primarykey
    data
    text
    <p>I've been trying to use jQuery to switch the video playing on an iPad by clicking a link. It works fine in a browser, however when I try it on the iPad it just pauses the video and doesn't load the other one.</p> <pre><code>// switch video sources on the fly // }).on('click', '.video-nav a', function(e){ // pause the current video // $("#" + $(this).attr("data-video-id"))[0].pause(); // change the source of the video in question // $("#" + $(this).attr("data-video-id") + " &gt; source").attr("src", $(this).attr("data-video")); // load the new source // $("#" + $(this).attr("data-video-id"))[0].load(); // play the new video // $("#" + $(this).attr("data-video-id"))[0].play(); // make the button's parent "active" by adding it as a class // $(this).parent().addClass("active").siblings().removeClass("active"); }); </code></pre> <p>and this is how I have my html set up:</p> <pre><code>&lt;video id="non" width="444" height="339" controls="true" preload="false" poster="images/image1.png"&gt; &lt;source src="videos/video1.mp4" type='video/mp4' /&gt; &lt;/video&gt; &lt;div class="video-nav"&gt; &lt;ul&gt; &lt;li class="active"&gt;&lt;a class="fourty-ten-ten" href="#" rel="external" data-video="videos/video1.mp4" data-video-id="non" data-poster="images/image1.png"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="fourty-ten-twenty" href="#" rel="external" src="" data-video="videos/video2.mp4" data-video-id="non" data-poster="images/image2.png"&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload