Is it possible to set a video to full screen on page load?
So far, the only answer I could get to work and was actually logical to me was setting the width and height on the element via CSS.
var $pop = Popcorn("#video");
$pop.play();
console.dir( $pop )
html{font-family:arial;}
#video{width:100%;height:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<video height="180" width="300" id="video" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>
I use Popcorn.js for playing the video on startup.
I am aware of setting CSS classes from JavaScript. The thing I'm more interested in would be the question: is there is a JavaScript based method to call, to maximize the video to full screen (on startup).
Using JavaScript, as suggested by Will, I also can't seem to get it to work properly
var video = $("#video");
var vid = video[0];
vid.play();
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
html{font-family:arial;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<video height="180" width="300" id="video" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>
Related
I am displaying a video on my website like this:
<video>
<source src={link} type="video/mp4" />
</video>
And I would like to extract duration of the video from the provided src link, to display it somewhere else on the page. Assume we have the link stored as a string, how will I extract the duration of the video?
Sample src link: https://firebasestorage.googleapis.com/v0/b/qriositynet-dev.appspot.com/o/chat%2FMgttfKqKIDhQ6bgtgy6V%2Fvideos%2F1663229371400watermelon-bunny.mp4?alt=media&token=722bb260-c65b-46fe-8805-4a5a742f282d
to get the duration of the video you have to wait for it to load using the event listener and that way you are sure you have the data, this is a link you can use to help you learn more about the API, here.
let video = document.getElementById("video")
video.addEventListener('loadeddata', function() {
console.log("test", video.duration)
// Video is loaded and can be played
}, false);
function myFunction() {
alert(video.duration);
}
myFunction
<html>
<h1>video duration</h1>
<button onclick="myFunction()" type="button">Get video length</button><br>
<video id="video">
<source src="https://firebasestorage.googleapis.com/v0/b/qriositynet-dev.appspot.com/o/chat%2FMgttfKqKIDhQ6bgtgy6V%2Fvideos%2F1663229371400watermelon-bunny.mp4?alt=media&token=722bb260-c65b-46fe-8805-4a5a742f282d" type="video/mp4" />
</video></html>
The video tag has a "duration" property, which will tell you the length of a video.
https://www.w3schools.com/tags/av_prop_duration.asp
<html>
<body>
<button onclick="myFunction()" type="button">Get video length</button><br>
<video id="myVideo" width="320" height="176" controls>
<source src="https://firebasestorage.googleapis.com/v0/b/qriositynet-dev.appspot.com/o/chat%2FMgttfKqKIDhQ6bgtgy6V%2Fvideos%2F1663229371400watermelon-bunny.mp4?alt=media&token=722bb260-c65b-46fe-8805-4a5a742f282d" type="video/mp4">
</video>
<script>
function myFunction() {
let vid = document.getElementById("myVideo");
alert(vid.duration);
}
</script>
</body>
</html>
i try to do this with many different way but i didn't get the result i want so can anyone help
<div style="width:500px;height:500px;">
<video controls autoplay width="400" height="400">
<source src="video/2.mp4" type="video/mp4">
</video>
</div>
and here is the only answer i found when i search but i dont understand it well and there is jquery on it i want to make it pure javascript
var figure = $(".video");
var vid = figure.find("video");
[].forEach.call(figure, function (item,index) {
item.addEventListener('mouseover', hoverVideo.bind(item,index), false);
item.addEventListener('mouseout', hideVideo.bind(item,index), false);
});
function hoverVideo(index, e) {
vid[index].play();
}
function hideVideo(index, e) {
vid[index].pause();
}
The answer is pretty simple:
document.getElementById("myVid").addEventListener("mouseover", function() {
this.play();
});
document.getElementById("myVid").addEventListener("mouseleave", function() {
this.pause();
});
<div style="width:500px;height:500px;">
<video id="myVid" controls autoplay width="400" height="400">
<source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
</video>
</div>
This should work for you.
You can find more information here about HTML5 video API.
const videoPlayer = document.querySelector('.videoplayer');
videoPlayer.addEventListener('mouseover', () => {
videoPlayer.play();
});
<p>Hover canvas to play the video</p>
<video class="videoplayer" width="320" height="240">
<source src="https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
</video>
How can I test against an invalid .mp4 format file in order to hide the corresponding container?
<div id="video">
<video controls width="320" height="240">
<source src="<?php echo $row["username"]);?>" type="video/mp4">
</video>
</div>
Here is my attempt:
<script>
document._video = document.getElementById("video");
document._video.addEventListener('error',function(){
video.style.display = "none";
});
</script>
why not work? because you addeventlistener to div not the source of video tag
<div id="video">
<video controls="controls" width="320" height="240">
<source src="aaaa" type="video/mp4"/>
</video>
</div>
<script>
var v = document.querySelector('#video');
var sources = v.querySelectorAll('source');
if (sources.length !== 0) {
var lastSource = sources[sources.length-1];
lastSource.addEventListener('error', function() {
v.style.display="none";
});
}
</script>
You can use canPlayType():
The possible return values are:
probably: The specified media type appears to be playable.
maybe: Cannot tell if the media type is playable without playing it.
'' (empty string): The specified media type definitely cannot be played.
If, instead you need the onerror in order to get
....These events occur when some form of error occurs while attempting to load or perform the media.
your code must be changed to:
$('#video source').on('error',function(e) {
The snippet:
var result = $('#video video').get(0).canPlayType($('#video video source').attr('type'));
console.log('The first video can be played: ' + result);
$('#video source').on('error',function(e) {
//
// this in order to dectect wrong sources
//
$('#video').toggle();
console.log('The first video source has errors...');
});
$('#newvideo source').on('error',function(e) {
//
// this in order to dectect wrong sources
//
$('#newvideo').toggle();
console.log('The second video source has errors...');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="video">
<p>The first video: it's ok</p>
<video controls width="320" height="240">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
</div>
<!-- This second video has an invalid source -->
<div id="newvideo">
<p>The second video: it has an invalid source</p>
<video controls width="320" height="240">
<source src="aaaaaa" type="video/mp4">
</video>
</div>
I have HTML5 player in form and use JS to step forward and step back in multi-level form. But, when user click any button (back, reset, etc.) the video is still playing. How to make auto-stop video when fieldset changes?
For example: Do you have a fever -> yes (here is video) -> reset -> video still playing in background.
JSFiddle
> <video id="video" width="960" height="600" controls="controls"
> autoplay="autoplay">
> <source type="video/ogg" src="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv" />
> </video>
$(".previous").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $('#firstField');
Working example with a snipplet:
$(".pause").click(function(){
$('#video')[0].pause();
});
$(".play").click(function(){
$('#video')[0].play();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="pause">Pause/Stop</button>
<button class="play">Play</button>
<video id="video" width="960" height="600" controls="controls" autoplay="autoplay">
<source type="video/ogg" src="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv" />
</video>
Try to add :
var vid = $("#video");
function pauseVid() {
vid.pause();
}
$(".resetButton").click(function(){
pauseVid();
}
For my website, I wanted a specific video to play, once a condition is met.
e.g (If x = 1, play the video)
I have this code in the HTML file:
<div id="video">
<video width="320" height="240" autoplay,>
<source src=video_mp4 type="video/mp4">
<source src=video_ogg type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
And in the JavaScript file:
document.getElementById("video").innerHTML.source.src = video_mp4;
document.getElementById("video").innerHTML.source.src = video_ogg;
But it doesn't seem to work.
You can use the following :
<video id="video1" src="vid.mp4"></video>
<script>
function playVideo(){
var video= document.getElementById("video1");
video.load();
video.play();
}
</script>