Note that there are some explanatory texts on larger screens.

plurals
  1. POcode fails to work outside a jsFiddle
    primarykey
    data
    text
    <p>I aim to make a web page with interactive videos, and while searching here I came across a link pointing to a <a href="http://jsfiddle.net/trpeters1/EyZdy/11/" rel="nofollow">jsFiddle that suits my needs</a>.</p> <p>As the code worked perfectly fine on the jsFiddle, it broke down when i tried to copy it into DreamWeaver (it seems the JavaScript had stopped working).</p> <p>I had put it all together as such:</p> <pre><code>&lt;html&gt; &lt;script type="text/javascript" src="jquery-1.7.1.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="sgrub.js"&gt;&lt;/script&gt; &lt;script&gt; $('#video_1, #video_2').hide(); $('.icon_1').click(function() { $('#video_2').fadeOut(function() { $('#video_1').fadeIn(); }); }); $('.icon_2').click(function() { $('#video_1').fadeOut(function() { $('#video_2').fadeIn(); }); }); $('.icon_1').click(function() { $('.video_2').get(0).pause(); $('.video_2').get(0).currentTime = 0; $('.video_1').get(0).play(); }); $('.icon_2').click(function() { $('.video_1').get(0).pause(); $('.video_1').get(0).currentTime = 0; $('.video_2').get(0).play(); }); &lt;/script&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;div class="icon_1" id="mediaplayer"&gt; cadillac &lt;/div&gt; &lt;div class="icon_2" id="mediaplayer2"&gt; nike &lt;/div&gt; &lt;div id="video_1"&gt; &lt;video class="video_1" width="50%" height="50%" controls="controls" poster="http://www.birds.com/wp-content/uploads/home/bird.jpg"&gt; &lt;source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" /&gt; &lt;/video&gt; &lt;/div&gt; &lt;div id="video_2"&gt; &lt;video class="video_2" width="50%" height="50%" controls="controls" poster="http://www.birds.com/wp-content/uploads/home/bird.jpg"&gt; &lt;source src="images/01.mp4" type="video/mp4" /&gt; &lt;/video&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>I have tried wrapping the JavaScript in a jQuery DOM ready call, with no avail:</p> <pre><code>$(document).ready(function() { // The JavaScript here }); </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.
 

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