Develop Reference

toggle functions in jQuery

I'm using the toggle function to show and hide content, it works well, the only problem I have is that when I place a video the video continues to play even when it is hidden, is there any way to stop playing the video when it is hidden
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
<button>Toggle</button>
<p>the video is displayed here</p>

You can do:
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
if (document.getElementById('myVideo').paused)
document.getElementById('myVideo').play();
else
document.getElementById('myVideo').pause();
});
});
If video is paused, play it and if it is playing then pause it on the click.

I think you would want to check if your wrapping p element is visible, using $("p").is(":visible").
If it is visible, pause the video using document.getElementById("yourVideoId").pause(), obviously replacing "yourVideoId" with whatever you have in the id attribute on your <video> tag. Then, after you do that, you can call .toggle() on your p element.
If it is not visible, and the user clicks your toggle button, I would imagine you would just want to show the video, and not resume playing it, as that might be a little jarring to the user. If you do want that functionality, however, just add document.getElementById("video").play() in the else block in the example below.
Here is a working example to demonstrate the functionality:
$(document).ready(function() {
$("button").click(function() {
var p = $("p");
if (p.is(":visible")) {
document.getElementById("video").pause();
$(this).text("Show");
} else {
$(this).text("Hide");
}
p.toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<video id="video" controls width="40%">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
</p>
<button>Hide</button>
Added width="40%" on the video so it fits in the snippet window.

I want to change the video source of a html5 Video with js

I want to change the source of the video with a click on a different video thumbnail on a site. I don't want to leave the site and go to a different one with each video, I want to stay on one site and be able to watch all videos there. I was trying it like that (with bootstrap):
<video id="mainvideo" width="640" height="360" controls>
<source id="vidsrc" src="" type="video/mp4">
</video>
<div onclick="mainVideoFrame()" class="clip-wrap">
<a class="clip">
<div class="poster-image">
<img onclick="mainVideoFrame()" class="lazy" src="assets/img/transparent.gif" data-original="assets/videos/thumb.jpg">
</div>
<span onclick="mainVideoFrame()" class="clip-title">Title here</span>
<i class="icon-large"></i>
<span class="client">...</span>
<span class="clearfix"></span>
</a>
</div>
<script type="text/javascript">
function mainVideoFrame() {
document.getElementById("vidsrc").src = "assets/videos/video.mp4";
}
</script>
I hope someone here got a solution :)

pass in the class with the onclick span onclick="mainVideoFrame(this.className).then in the function take it in mainVideoFrame(videoid) then use that the decide which video to show

How to solve the non-playing audio in HTML in various browsers

I am playing the following mp3 in various browsers and sometimes it plays and sometimes it doesn't. Specifically now it doesn't play in Chrome anymore but it plays in Firefox:
http://langcomplab.net/Most_Precious_Possession_Master.mp3
Here's the code for it:
The second auditory story is titled, “The Most Precious Possession.” Press the “Play Story” button to begin listening to the story; after you have finished listening to the story, you will answer a set of questions about the story.
<div>
<audio id="audio3" src="http://langcomplab.net/Most_Precious_Possession_Master.mp3" style="width:50%">Canvas not supported</audio>
</div>
<p> </p>
<div><button name="play" onclick="disabled=true" style="height:25px; width:200px" type="button">Play Story</button></div>
Here's the javascript:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your Javascript Below This Line*/
var aud = document.getElementById('audio3');
this.questionclick = function(event,element){
if((element.type == "button") && (element.name == "play"))
{
aud.play();
}
}
});
So I am not sure what's the fix. I am using Qualtrics for creating an audio survey.
UPDATE:
Eventhough I changed the code to the following it doesn't say the browser doesn't support this format. I am not sure what I am missing. Here's a screenshot:
<audio controls="">< id="audio3" src="http://langcomplab.net/Honey_Gatherers_Master.mp3" style="width:50%" type="audio/mpeg">Your browser does not support this audio format.</audio>

You could just use this:
<div>
<audio controls>
<source src="http://langcomplab.net/Most_Precious_Possession_Master.mp3"type="audio/mpeg">
Your browser does not support this audio format.
</audio>
</div>
It should work on any modern browser (HTML5 is needed). Hope that helps.
Edit: To make it work with the button, and not show the HTML5 controls, you could use:
The second auditory story is titled...
<div>
<audio controls id="reader" style="display:none">
<source src="http://langcomplab.net/Most_Precious_Possession_Master.mp3"type="audio/mpeg">
Your browser does not support this audio format.
</audio>
</div>
<input id="Play Story" type="button" value="Play Story" onclick="document.getElementById('reader').play();" />

Play Video button

I want to trigger play function of the video. . Can you suggest the javasript function to play this video ?
jsfiddle code is given here. To play the video I need to rightclick the video and they click play function of flashplayer.
I have the below video code in html:
<div class="content flowplayer is-splash is-closeable" id="vid1">
<video src="http://www.w3schools.com/html/movie.webm" tabindex="0">
<source type="video/mp4" src="http://www.w3schools.com/html/movie.mp4"></source>
<source type="video/webm" src="http://www.w3schools.com/html/movie.webm"></source>
</video>
</div>

I have update your code. It's working now.
You have to get element's id of tag video and then just say .play()
More example here.

Get a reference to the video element (e.g. by giving it an id then using document.getElementById), then call the play() method on it.

Add event on html5 video play button

So I only want to access the play button of the video controls, no action when pressing the track bar or volume. I want something like this but with html5 video http://flash.flowplayer.org/demos/installation/multiple-players.html
jQuery(document).ready(function() {
$('.vids').click(function(){
$('.vids').each(function () {
this.pause();
});
});
});
<video controls="controls" class="vids" id="1">
<source src ....>
</video>
<video controls="controls" class="vids" id="2">
<source src ....>
</video>
....
So now all videos stop except the one I clicked but when I press the trackbar or volume, it also stops. Any solutions without making my own controls or making use of another videoplayer? I found different solutions but not as I want :S

I think you have to target the current item which you are clicking so that the clicked target get the command to process to do this try this one and see if this works for you:
$('.box').click(function(e){
$(e.target).pause();
});