I am trying to show the poster image once the video ends and here is the code. However the poster image is not showing up. Any clues why this is not happening?
The ideal steps would be
1. Pause video
2. Init at first frame
3. Remove default controls
4. Show poster image.
Code:
document.getElementById("video1").addEventListener("ended", function () {
document.getElementById("video1").pause();
document.getElementById("video1").currentTime = 0;
document.getElementById("video1").removeAttribute("controls");
document.getElementById("video1").setAttribute("poster", "graphic.jpg");
});
Try this one:
document.getElementById("video1").addEventListener("ended", function () {
this.load()
});
Related
I am working on a music player. I am successfully able to play audio from urls and getting notification of the playing music.
I can use the play/pause button to play/pause the music ( it worked automatically), but I don't know how to implement the next and previous buttons.
I am using latest version of Chrome (84.0.4147.89).
[Edit 1]
Minimum Reproducible Code:
<html>
<head>
<title>Xt3m1xMus1c</title>
</head>
<body>
<audio id="song" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" autoplay></audio>
</body>
<script>
function nextSong() {
// Need to call this function when I press the next button on the notification
document.getElementById("song").setAttribute('src', "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3");
}
</script>
</html>
These buttons can be controlled with the Media Session API. To implement the previous and next buttons you need to set the corresponding action handlers.
navigator.mediaSession.setActionHandler(
'nexttrack',
() => { /* Your code to play the next track. */ }
);
navigator.mediaSession.setActionHandler(
'previoustrack',
() => { /* Your code to play the previous track. */ }
);
But I think the buttons shown in the picture are the 'seekbackward' and 'seekforward' buttons.
I hid control panel of video on mobile using this "video::-webkit-media-controls-panel{display:none}" in responsive.css because it occupy the height of video.
But I want to show the control panel when user click the video screen.
How can I make it? Any help would be appreciated.
than you
Rather than use the shadow DOM, have you tried making controls visible or not - in this instance they're hidden by default but get shows when the user clicks and hidden when the user mouses out (could trigger on a click elsewhere, or when the video starts playing for instance)
<video width="400" controls id="video" onclick="mox(true);" onmouseout="mox(false);">
<source src="bigbuck.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
// get the video element
var video = document.getElementById("video");
// attach a listener to hide controls when video starts playing
// note: you probably want some more logic to make this a more usable experience
video.addEventListener('playing', mox(false),false);
// hides the controls
mox(false)
function mox(s) {
if (s) {
video.controls = "controls";
} else {
video.controls = "";
}
}
</script>
I'm adding videos to a very specific website made with Wordpress. I have to control carefully each visual element and behaviour of this page wich is devoted to arts (And because of this, I must be very careful of resultns)
Well, I create a new Wordpress page and add the following code:
<video width="480" height="360" controls class="size-full wp-image-19 aligncenter">
<source src="http://URL_OF_MY VIDEO">
</video>
And everything goes on. The videos are hosted on the website server. I'm usign a 4:3 video.
But, when I select the fullsize option, the video wich is 4:3 shows in the screen midst without making the background be darker or black. Thus, we have a bad result consisting in a messy composition, ugly and far from my objective.
How could I add code to this html to archive this? Make the background darker while playing my video on fullscreen (if it's 4:3, it will left side spaces in a 16:9 screen)
EDIT:
I've tried to add this code to functions.php on the wordpress core.
//[myjavascript]
// Php function that executes javascript when a shortcode is called. Added to
//funcions.php
function myjavascript_func( $atts ){
return "<script>
document.getElementById("my_vid").addEventListener('play', lowLights, false);
function lowLights() {
this.removeEventListener('play', lowLights, false);
document.getElementById("videobox").style.backgroundColor="black";
</script>";
}
add_shortcode( 'myjavascript', 'myjavascript_func' );
But as a result, when I call this function via the shortcode [myjavascript], I obtain this error message: Parse error: syntax error, unexpected T_STRING
I presume that could be because of the references to Id's.
What could be wrong?
You can use something like this:
<div id="videobox">
<video id="my_vid">
<source src="your-video-here.mp4">
</source>
</video>
</div>
then some JS:
<script>
document.getElementById("my_vid").addEventListener('play', lowLights, false);
function lowLights() {
this.removeEventListener('play', lowLights, false);
document.getElementById("videobox").style.backgroundColor="black";
}
</script>
I am trying to figure out a way to have a static image appear were the video will be when a visitor first comes to my webpage. I would like to have a graphic button that if clicked will trigger the video to play. This graphic would be elswere on the page not in or on top of the video. So, I guess I am looking for how to do 2 things.
Play an html5 video by clicking a graphic elswere on the page
When that video is played it should swap out the static graphic version for the active video version. Ideally, once played the static version would replace the video and be reset to play again.
Any help with this would be greatly appreciated. Thanks!
This should do the trick, just make sure to point 'video' and 'image' to their respective URLs.
<script>
function doVideo()
{
var video = "myvideo.mp4";
document.getElementById("videoimgdiv").innerHTML = "<video autoplay onended=\"doImage()\"><source src=\"" + video + "\"\></video>";
}
function doImage()
{
var image = "http://us.123rf.com/400wm/400/400/podlesnova/podlesnova0906/podlesnova090600034/5117393-small-red-furry-kitten-with-blue-eyes.jpg";
document.getElementById("videoimgdiv").innerHTML = "<img onclick=\"doVideo()\" src=\"" + image + "\"/>";
}
</script>
<div id="videoimgdiv">
<img onclick="doVideo()"src="http://us.123rf.com/400wm/400/400/podlesnova/podlesnova0906/podlesnova090600034/5117393-small-red-furry-kitten-with-blue-eyes.jpg" />
</div>
As the title explains,
I need to disable pausing when clicked on the video viewing area, since i'm trying to attach other events when clicked on that area.
I tried using this videojs.com But found no solution
in video.dev.js (version 4.1) line 3399 comment function body
// OnClick - Toggle between play and pause
vjs.PlayToggle.prototype.onClick = function(){
/*if (this.player_.paused()) {
this.player_.play();
} else {
this.player_.pause();
}*/
};
in video.js line 80 column 403 its the same function , comment function body
function(){/*this.a.controls()&&(this.a.paused()?this.a.play():this.a.pause())*/}
The easiest way - just add this to css file:
.video-js.vjs-playing .vjs-tech {
pointer-events: none;
}
If you don't mind editing the videojs files directly you can either set the CSS for bigPlayButton to none instead of block, or comment out the following:
// Make a click on the video act as a play button
this.activateElement(this.video, "playToggle");
and this behaviour will be gone.
I wanted to comment on Ashot his answer for the solution on Video JS 4.6.3, but my reputation is not high enough yet.
MrHunter provided the answer for Video JS 4.3.
In version 4.6.3 the same code is on line 99 of the file video.js and looks like this:
function(a){0===a.button&&this.m().controls()&&(this.m().paused()?this.m().play():this.m().pause())};
After commented out it looks like this:
function(a){/*0===a.button&&this.m().controls()&&(this.m().paused()?this.m().play():this.m().pause())*/};
This worked perfectly for me. Thanks to Ashot and MrHunter for leading me to the solution on the newest version of Video JS!
If you want to prevent pause on click on the video,
Just add these 2 lines in the script.
var videoEle = document.getElementById("videoTagId");
videoEle.onpause = () => { videoEle.play(); }