How to stop a video using stop function? - javascript

Alright, I have very little programming experience and just want to make controls for video and audio pieces together on one page. I have searched a lot and can't figure it out.
var stop = function (id) {
.pause();
.src = '';
};
I want to pass either the audio or videos' id as the parameter in my function but I don't understand how make code that can be used with either. I can't put id.pause(); into my function to pause whatever id I put in as a parameter, so I'm confused as to how to make it work. Any help is appreciated!!

You could use JQuery:
$('#playMovie1').click(function(){
$('#movie1').get(0).play();
});
Or you could do something like this:
function playVid(x) {
var vid = document.getElementById(x).pause();
}

You can use
var stop = function (htmlId) {
var vid = document.getElementById(htmlId);
vid.pause();
};

If you are passing the id then use that id to pause or play
var stop = function (id) {
$('#'+id).pause(); // to pause the video
.src = '';
};

Related

audio.play() working within existing function but not as lone function

I am trying to make a sound play when a button is clicked. Here is the function that I am trying to use:
function sound(){
var audio = new Audio("button.wav");
audio.play();
}
and then I have this at the bottom of the file:
document.getElementById("convert").onclick = function() { sound(); };
I know that the code works because if I put the 2 lines of code inside the sound function inside of another function that performs a calculation on the button click, the sound plays. Why is the code only working when added to an existing function, but not as its own?
I'm assuming that by "its own" you are referring to this:
document.getElementById("convert").onclick = sound();
In this case, you are assigning the returned value of sound() to the onclick property of the element. If you want sound to be called when the button is clicked, remove the parenthesis:
document.getElementById("convert").onclick = sound;
Demo:
function sound(){
var audio = new Audio("https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3");
audio.play();
}
document.getElementById("convert").onclick = sound;
<button id="convert">Play</button>

Is there any way to get current caption's text from video tag using Video.js?

I want to get current subtitles' text during playing a video (and than implement own subtitles block (i.e. to hide original) and also use the information in a few different ways). Currently I use videojs for my player. Is there any way to get current caption's string from it?
This code gets the current cue and put into the <span> element
(function(){
var video = document.querySelector('video');
var span = document.querySelector('span');
if (!video.textTracks) return;
var track = video.textTracks[0];
track.mode = 'hidden';
track.oncuechange = function(e) {
var cue = this.activeCues[0];
if (cue) {
span.innerHTML = '';
span.appendChild(cue.getCueAsHTML());
}
};
})()
Here is the tutorial :Getting Started With the Track Element
Yes, you can add a cuechange event listener when your video loads. This can get you the current track's caption text. Here is my working example using videojs.
var videoElement = document.querySelector("video");
var textTracks = videoElement.textTracks;
var textTrack = textTracks[0];
var kind = textTrack.kind // e.g. "subtitles"
var mode = textTrack.mode
Try this one
Use the HTML5 Video API to get the current source, the split the src using / and . to get the name.
Media API
The above link has all the available API in the HTML5 video player. Your plugin uses HTML5 video player!
Solution:
videojs("example_video_1").ready(function() {
myvideo = this;
var aTextTrack = this.textTracks()[0];
aTextTrack.on('loaded', function() {
console.log('here it is');
cues = aTextTrack.cues(); //subtitles content is here
console.log('Ready State', aTextTrack.readyState())
console.log('Cues', cues);
});
//this method call triggers the subtitles to be loaded and loaded trigger
aTextTrack.show();
});
Result:
PS. Code found here.

Struggling to get the currentTime of an audio element with jquery

I'm trying to control an audio element to use in my custom player, but for some reason I cannot get the currentTime of and duration. I've tried numerous things like:
var player = $("#player");
player.ontimeupdate = function () {
myFunction()
};
alert(player.currentTime);
Which alerts "undefined". So why isn't this working? Am I missing something obvious here?
Give this:
var player = $("#player")[0];
var player = $("#player").get(0);
You are applying on jQuery object! Not the correct HTML element.

Video events not triggering on every refresh

I am currently trying to get the width and height of a video by using the following:
var vid = document.getElementById('myVideo');
vid.onloadedmetadata = function () {
var vidHeight = this.videoHeight;
var vidWidth = this.videoWidth;
console.log(vidHeight, vidWidth);
};
I noticed when I tried to use the variables later, it sometimes worked and sometimes didn't. I put a console log in (as above) and refreshed my browser. Sometimes the values show and sometimes they don't, like the onloadedmetadata is not triggering at all. Does anyone know why this is and how to get around it?
I also tried it with another event, onloadstart. This had the same behaviour.
I found the answer (this example is in jQuery, easy enough in plain JS too though):
this.options.$video.on('canplay canplaythrough', cb);
if (this.options.$video[0].readyState > 3) {
cb();
}
function cb() {
var vidWidth = me.options.$video[0].videoWidth;
var vidHeight = me.options.$video[0].videoHeight;
console.log(vidWidth, vidHeight);
}

Playing audio files in javascript

I have many small audio files, and I want to play these files one after another, not all of them at the same time. I have used the object Audio in javascript like this
var audio_1 = new Audio();
var audio_2 = new Audio();
var audio_3 = new Audio();
audio_1.src = "/path1";
audio_2.src = "/path2";
audio_3.src = "/path3";
Now I just need to call the function play for every object, but I need to play the audio_1 alone, and play audio_2 when the first one ended.
The solution I found is to test on the property ended of every object
audio_1.ended; // returns true when it ends playing
I found an object onended inside the audio object, I thought it's a function but it's not, can someone help me and give me the best way to solve this problem.
use addEventListener instead of assigning a function to the onended property:
audio.addEventListener('ended', function() {}); // Do
audio.onended = function() {}; // Don't
So, a IMHO dirty way is this:
audio_1.play();
audio_1.addEventListener('ended', function() {
audio_2.play();
audio_2.addEventListener('ended', function() {
audio_3.play();
};
};

Categories