I'm using video.js (4.1.0), and would like to return to the ready-to-start state at the end of the video. I don't see how to do this.
If I do
myPlayer.on("ended", function(){
});
and load the poster frame in there, using myPlayer.posterImage.show(); it covers the entire video object, even if a user starts playing the video again.
If, at the end, I do this:
this.pause();
this.currentTime(0);
it has the video paused at the beginning, rather than the ready state with poster frame.
Any thoughts on how I can accomplish this?
The poster image should disappear again when playback restarts - do you have a link where it does not? It does in this fiddle, where the posterImage and bigPlayButton are shown and currentTime is set to 0.
var vid = videojs("myVideo");
vid.on("ended", function(){
vid.posterImage.show();
vid.bigPlayButton.show();
vid.currentTime(0);
})
Related
Is there any configuration that I can pass so that the Shaka Player pauses itself at certain duration/point in the video? , for e.g. I want to pause player on 300 seconds.
One way is to change playRangeEnd configuration, but that messes the user experience
Is there any alternative?
As suggested by #TheModMaker on https://github.com/google/shaka-player/issues/2510 ,
This is related to the native video element, not the Shaka.
timeupdate event can be used to achieve this, like,
video.addEventListener('timeupdate', () => {
if (video.currentTime >= 300)
video.pause();
});
timeupdate event is fired when the video's currentTime is updated.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event
Hi this question is for anyone who may be able to show me how to resolve this user issue. I have a script that plays a video with the user able pause and resume on touch. This was easy enough to do and works fine. At a certain point the script pauses the video for the user for a set time so the user has time to read the information on the screen. The intent is for them to be able to to resume playing the video after reading the information. If the user waits long enough, the touch to resume works fine. But, because some users read faster than others it is obvious I need to detect the touch even when the video was paused by the script - this is the part I need help with. Currently, if the video is paused by the script and the user touches the screen before the set time for the pause expires, the play button will show but pressing it to play will not resume the script until that time expires. I presume I need a listener inside the function the script used to pause the video. I am not quite sure the best way to handle that. Here is a snippet of my approach so far:
var myVideo = document.getElementById("myVideo");
function playPause() {
var el = document.getElementById("playButton");
if (myVideo.paused) {
myVideo.play();
el.className ="";
} else {
myVideo.pause();
el.className = "playButton";
}
}
myVideo.addEventListener("click", playPause, false);
var pause42 = function(){
if(this.currentTime >= 42 && !myVideo.paused) {
this.pause();
// remove the event listener after you paused the playback
this.removeEventListener("timeupdate",pause42);
}
};
myVideo.addEventListener("timeupdate", pause42);
Any help is appreciated!
FYI problem solved. Posting the answer here if it helps others.
var pause42 = function(){
if(this.currentTime >= 15 && !myVideo.paused) {
this.currentTime = 42;
this.pause();
// remove the event listener after you paused the playback
this.removeEventListener("timeupdate",pause42);
}
};
myVideo.addEventListener("timeupdate", pause42);
I am using BXSlider to display various videos. I am trying to fade out an overlay when the first video starts playing.
I have tried hooking into onSliderLoad but that trigger before the video has started playing.
Anyone know if there is a way I can detect when the video has actually started playing?
Listen for the playing event.
Demo
var vid = document.getElementById('vid');
vid.addEventListener('playing', function(e) {
console.log('Video has started');
});
<video id='vid' src='http://media6000.dropshots.com/photos/1381926/20170326/005611.mp4' width='320' height='180' controls autoplay></video>
I have read from here that how i can mute/unmute mic for a localstream in webrtc:WebRTC Tips & Tricks
When i start my localstream mic is enable at that time by default so when i set audioTracks[0].enabled=false it muted a mic in my local stream but when i set it back true it enable to unmute. Here is my code mute/unmute for a localstream:
getLocalStream(function (stream,enable) {
if (stream) {
for (var i = 0; i < stream.getTracks().length; i++) {
var track = stream.getAudioTracks()[0];
if (track)
track.enabled = enable;
//track.stop();
}
}
});
Can someone suggest me how i can unmute mic back in a localstream.
I assume that your method getLocalStream is actually calling navigator.getUserMedia. In this case when you do this you'll get another stream, not the original one. Using the orignal stream you should do
mediaStream.getAudioTracks()[0].enabled = true; // or false to mute it.
Alternatively you can check https://stackoverflow.com/a/35363284/1210071
There are 2 properties enabled and muted.
enabled is for setting, and muted is read-only on the remote side (the other person) (I have tried, setting muted does not work, basically, value cannot be changed)
stream.getAudioTracks()[0].enabled = true; // remote one will get muted change
Ahhh there is a good way to do this:
mediaStream.getVideoTracks()[0].enabled = !(mediaStream.getVideoTracks()[0].enabled);
You should read and set the "enabled" value. The "enabled" value is for 'muting'. The "muted" value is a read-only value to do with whether the stream is currently unable to play.
The enabled property on the MediaStreamTrack interface is a Boolean value which is true if the track is allowed to render the source stream or false if it is not. This can be used to intentionally mute a track. When enabled, a track's data is output from the source to the destination; otherwise, empty frames are output.
In the case of audio, a disabled track generates frames of silence (that is, frames in which every sample's value is 0). For video tracks, every frame is filled entirely with black pixels.
The value of enabled, in essence, represents what a typical user would consider the muting state for a track, whereas the muted property indicates a state in which the track is temporarily unable to output data, such as a scenario in which frames have been lost in transit.
https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/enabled
Step 1) call jquery.min.js
Step 2) use below code ,
A) To Mute
$("video").prop('muted','true');
B) To unmute
$("video").prop('muted','');
single Icon mute and unmute like youtube
function enablemute(thisimag) {
if($(thisimag).attr('src')=='images/mute.png')
{
$("video").prop('muted','');
$(thisimag).prop('src','images/unmute.png');
}
else
{
//alert('her');
$("video").prop('muted','true');
$(thisimag).prop('src','images/mute.png');
}
}
above function enablemute should call from onclick
I have successfully used webrtc to bind a local camera to a html element.
I have more than one camera connected to my pc.
How can I use javascript to find out the DeviceID of the camera, that is now in use?
2022 Answer
(Not sure if the previous answer was correct in its time, but here's what I did to solve the same question.)
I assume the HTML element you bound the camera to was a video element. Here's how I got the the DeviceID from it.
const video = document.querySelector("#videoElement");
const stream = video?.srcObject;
const videoTrack = stream?.getTracks()?.find(track => track.kind === "video");
const videoID = videoTrack?.getSettings().deviceId;
Get the tracks from the MediaStream you get from getUserMedia, look at the label property.
See https://github.com/webrtc/samples/blob/master/src/content/getusermedia/gum/js/main.js#L23 for a sample.