i am implementing a vimeo video in my app using the below code:
html
and
ngAfterViewInit() {
this.player1 = new Player(this.playerContainer.nativeElement);
this.player1.on('play', function(data) {
console.log('played the video!');
});
this.player1.on('pause', function(data) {
console.log('paused the video!',data);
});
}
The player and all its functions work until i pass a new link to the iframe, the video plays but it doesn't return when the video was paused or played, unless i reload the page - does anyone know how to fix this? The code for the vimeo player is in a component which is being called by the main page and a new link is passed to it when some item is pressed Also, i am using Ionic5 and Angular.
Related
I have a simple site with an HLS stream from a m3u8 playlist in an autoplay video tag. If the stream stops for more than 10s or so it will not "catch up" and start again when the stream is restarted - I need to manually refresh the page to get it to play again.
Is there a way with js (or something else) to automatically refresh the page after the video has been buffering for X time? (say 5 seconds)
I managed to get this with some help from VC.One's answer. This will reload after the video has been buffering for 5 seconds, if the video was previously playing. Otherwise it will be stuck in a reload loop if it never starts playing. I am still looking for a way to check whether the stream is live without actually reloading the page. video.load() and video.play() are giving me errors, but I will update this post when I figure it out.
var reloadCheck;
var reloadThisTime;
var video = document.getElementById("videotag");
var sourcetag = document.getElementById("sourcetag");
video.addEventListener('waiting', (event) => {
console.log("No connection");
reloadCheck = setTimeout(function(){
if(reloadThisTime){
location = '';
};
},5000);
});
video.addEventListener('playing', (event) => {
console.log("Connected");
clearTimeout(reloadCheck);
reloadThisTime = true;
});
I've tried several solutions. Both work in Safari, but Chrome stops the audio after playing the file through. Before this there is the getNewAudioFileFunction - which fetches a file from an API, and plays it.
So I want to detect when the audio file is finished, and upon the audio.ended I want to retriever the getNewAudioFileFunction. What is it that I don't get here?
audio.onended = function() {
console.log('Audio Ended');
getNewAudioFileFunction();
}
and:
if (audio.play(audio)) {
audio.addEventListener('ended', function() {
console.log(audio.currentTime);
console.log('audio ended');
getNewAudioFileFunction();
});
I took an mp4 video, encoded it for HTTP Live Streaming (HLS) using ffmpeg — resulting in a series of myvideo.ts files and a myvideo.m3u8 playlist — and am attempting to play it using the HTML <video> tag in Safari, with the native HLS capabilities of that browser:
<video id="myvideo" src="myvideo.m3u8" loop="loop"></video>
It plays, once. But despite the "loop" attribute in the video tag, it doesn't loop. It stays frozen on the last frame of the video.
If I try to detect the end of the video using an event listener as described here:
Detect when an HTML5 video finishes
… that event never seems to fire.
The "paused" property in javascript (document.getElementById('myvideo').paused) evaluates to false, even after the video has played once and stopped.
How can I get the video to loop in Safari?
HLS is intended to be a live stream, so it never actually "finishes" in order to automatically loop. I used a JavaScript timer as a hack to get around this:
var LOOP_WAIT_TIME_MS = 1000,
vid = document.getElementById("myvideo"),
loopTimeout;
vid.addEventListener('play', function() {
if (!/\.m3u8$/.test(vid.currentSrc)) return;
loopTimeout = window.setTimeout(function() {
loopTimeout = null;
vid.pause();
vid.play();
}, (vid.duration - vid.currentTime) * 1000 + LOOP_WAIT_TIME_MS);
});
vid.addEventListener('pause', function() {
if (!/\.m3u8$/.test(vid.currentSrc)) return;
if (loopTimeout) {
clearTimeout(loopTimeout);
loopTimeout = null;
}
});
I have a html page that uses the camera on my iphone and returns an alert. It works fine as a web app but when i try to use native ui webview the camera still gets called but there is no alert. Any idea why?
function getImage()
{
navigator.device.capture.captureImage(
function(success){
alert('getImageSuccess');
},
function(error){
alert('getImageFailure');
}
);
}
I have a page which autoplays a video. How would I redirect and/or display a webpage when the video is done being watched? Thanks.
Use the ended event:
var videoElement = document.querySelector('video'); // or whatever
videoElement.addEventListener('ended', function (){
window.location = 'http://newpage.com';
});
See it here in action: http://jsfiddle.net/bCBhD/
"onended" is a standard event for html objects which you can use. Documentation here: http://www.w3schools.com/tags/ref_eventattributes.asp