If I load the player before I have started live streaming and then start streaming after sometime it doesn't play the video, how i manage this issue?
There is my code i call for run html5 video with hls
playVideo(videoLink:string){
console.log("video link", videoLink);
const video = document.getElementsByTagName('video')[0];
if (Hls.isSupported()) {
/*var hls = new Hls({
debug: true,
});*/
var hls = new Hls();
hls.loadSource(videoLink);
hls.attachMedia(video);
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
video.play();
});
}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoLink;
video.addEventListener('canplay', function () {
video.play();
});
}
}
<div class="container-video" *ngIf="videoFinish == false; else videoStopped">
<video id="video"
width="700"
height="400"
preload="auto" controls>
</video>
</div>
Related
Simply trying to redirect after video finishes, works great on all browsers except mobile chrome and safari. Doesn't seem to catch the event, what am I missing?
function playVideo(){
var video = document.getElementById('video');
video.play();
video.addEventListener('ended',function(){
window.location = 'appt.html';
});
}
<video controls id="video" width="100%" onclick="playVideo()">
<source src="./advisors/intro.mp4" type="video/mp4" />
Turns out the fix was to simply remove the "controls" attribute from "video" element.
Because your onclick function does not firing on touch devices
function playVideo() {
var video = document.getElementById('video');
video.play();
video.addEventListener('ended', function() {
window.location = 'appt.html';
});
}
document.getElementById('video').addEventListener("canplay", playVideo)
<video controls id="video" width="100%">
<source src="./advisors/intro.mp4" type="video/mp4" />
I am trying to improve page speed on my site, and I have an 8mb autoplay video.
I have been looking at loading the video after the page load. I managed to get to work in chrome, firefox, etc. but not on some versions of Safari. In some versions, I just see the poster image and play button.
Here's the code:
window.addEventListener("load", () => {
console.log("load");
async function setupVideo() {
console.log('setupVideo function');
const video = document.getElementById('video');
video.src = 'video__h264_high-bitrate-2-86mb_blue_20_12.mp4';
console.log(video.src);
video.load();
video.play();
return video;
}
setTimeout(() => {
setupVideo();
}, 3000);
});
<video id="video" class="settings-video-background" loop="" muted="" autoplay="" playsinline="" poster="/airline_software_masthead-video_poster_home_2.jpg">
<source src="" type="video/mp4">
Your browser does not support the video tag.
</video>
Seems the issue was window.addEventListener("load") patchy support, the following seems to fire it.
if (document.readyState === 'complete') {
setupVideo();
} else {
window.addEventListener('load', setupVideo);
}
I've already tried adding a video tag and then setting the source to the webcam, but this didn't work. It just produced 404s in the console. Here is the code I tried:
<html>
<head>
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs"></script>
<!-- Load Posenet -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow-models/posenet"></script>
</head>
<body>
<video autoplay="true" id="videoElement">
</video>
</body>
<script>
var video = document.querySelector("#videoElement");
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true })
.then(function (stream) {
video.srcObject = stream;
})
}
var flipHorizontal = false;
var imageElement = document.getElementById('videoElement');
posenet.load().then(function(net) {
const pose = net.estimateSinglePose(imageElement, {
flipHorizontal: true
});
return pose;
}).then(function(pose){
var parts = pose["keypoints"];
console.log(parts[9]);
})
</script>
</html>
Please see our official example code here for using webcam with bodypix (which is very similar to posenet but gives you even more details). The webcam part of the code however would be the same:
CodePen:
https://codepen.io/jasonmayes/pen/QWbNeJd
Or Glitch: https://glitch.com/edit/#!/tensorflow-js-body-segmentation
Essentially the key parts here are:
const video = document.getElementById('webcam');
// Check if webcam access is supported.
function hasGetUserMedia() {
return !!(navigator.mediaDevices &&
navigator.mediaDevices.getUserMedia);
}
// Enable the live webcam view and start classification.
function enableCam(event) {
// getUsermedia parameters.
const constraints = {
video: true
};
// Activate the webcam stream.
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
video.addEventListener('loadedmetadata', function() {
// do something once loaded metadata
});
video.srcObject = stream;
video.addEventListener('loadeddata', function(){
// Do something once loaded.
});
});
}
// If webcam supported, add event listener to button for when user
// wants to activate it.
if (hasGetUserMedia()) {
const enableWebcamButton = document.getElementById('webcamButton');
enableWebcamButton.addEventListener('click', enableCam);
} else {
console.warn('getUserMedia() is not supported by your browser');
}
I'm trying to get the seek time while on video playing. I use the play event it is triggered only video start.
HTML:
<video controls id="videoFile">
<source src="Why Linux over Windows 3D Animation.mp4" id="video_here">
</video>
Javasript:
var secondvideo = document.getElementById('videoFile');
secondvideo.addEventListener('play', function(e) {
// The video is playing
console.log("current time= "+ document.getElementById('videoFile').currentTime);
});
secondvideo.addEventListener("timeupdate",
function (ev) {
console.log(ev.target.currentTime);
});
https://www.w3.org/TR/html5/embedded-content-0.html#handler-mediacontroller-ontimeupdate
Here you can find HTML5 Video Events and API: https://www.w3.org/2010/05/video/mediaevents.html
From MDN:
The HTMLMediaElement.currentTime property gives the current playback
time in seconds. Setting this value seeks the media to the new time.
Based on this information, you should do something like the following:
var secondvideo = document.getElementById('videoFile');
secondvideo.addEventListener('play', function(e) {
// The video is playing
console.log("Playing video");
console.log(secondvideo.currentTime);
});
secondvideo.addEventListener('pause', function(e) {
// The video is paused
console.log("Paused video");
console.log(secondvideo.currentTime);
});
secondvideo.addEventListener('seeking', function(e) {
// The user seeked a new timestamp in playback
console.log("Seeking in video");
console.log(secondvideo.currentTime);
});
When I add onclick="playPause()" to just one video it works great. I click the video and it'll play or pause just like I want it to. If I have more than one video, even if the videos have different IDs (for example: video id="v1" and video id="v2") whenever I click on one video it'll always play one specific video. Using this script on multiple videos seems to only allow play/pause toggling on one video. Here's the html and script I'm using:
<video id="v1" width="480px" height="267px" controls onclick="playPause()">
<source src="S12E13%203%20Acts%20of%20God.mp4" type="video/mp4">
</video>
<script>
var myVideo = document.getElementById("v1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause(); }
</script>
<video id="v2" width="480px" height="267px" controls onclick="playPause()">
<source src="S12E13%203%20Acts%20of%20God.mp4" type="video/mp4">
</video>
<script>
var myVideo = document.getElementById("v2");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause(); }
</script>
<video id="v3" width="480px" height="267px" controls onclick="playPause()">
<source src="S12E13%203%20Acts%20of%20God.mp4" type="video/mp4">
</video>
<script>
var myVideo = document.getElementById("v3");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause(); }
</script>
BTW: not a big deal, but I've noticed the original Play button doesn't work anymore when I use this script. Is there a way to fix that?
You can pass the clicked element as an argument to the function like onclick="playPause(this)", then you just have a single definition:
function playPause (video) {
if (video.paused)
video.play();
else
video.pause();
}
Or alternatively you can find all videos and bind event listeners to them iteratively using document.getElementsByTagName() or document.querySelectorAll():
document.querySelectorAll('video').forEach((video) => {
video.addEventListener('click', function (event) {
if (this.paused)
this.play();
else
this.pause();
});
});