I'm trying to use a video as a background for my div.
I've loaded the mp4 version of the video into my server, inside the public folder.
When I load the page the video doesn't seem to be there since it's all white, but when I try another video from another website this works fine.
Is there something I need to do while loading the video into my server or there is something wrong with my code?
<body>
<video id="bgvid" controls="controls" autoplay muted>
<source src="http://MyUrl/public/video.mp4" type="video/mp4">
</video>
<div class="overlap">
<div class="overlapalign"><div class="overlaptext">OVER TEXT</div></div>
</div>
</body>
Try including this script
<script type="text/javascript">
$(document).ready(function() {
$('video').get(0).play();
});
</script>
Html5 "autoplay" doesn't work with some browsers.
Related
I am trying to play a video on HTML using video tag. However, it is not playing at all. I'm thinking maybe it is the path problem.
https://imgur.com/sGyzvbx "screenshot of the file path"
I tried to use multiple video formats like WebM, mp4, and avi to test it out. However, the result is the same.
<video width="420" height="345" src="../test.mp4">
</video>
Try like this. video inside source tag. In your code you are miss controls. Html video can not play automatically. so we need control
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<video width="400" controls src="../video.mp4"></video>
</body>
</html>
I have a video in my header, however, it will only play once you click on the home link in the menu to go to the /index.html. It will not play when the page first loads. I have also tested to see if manually entering /index.html at the end of the url works, it does not. The code I am using to play the video is:
<video autoplay loop>
<source type="video/mp4" src="images/untitled.mp4" />
<source type="video/webm" src="images/untitled.webm" />
</video>
And my website is http://richardgao.5gbfree.com (source code can be checked)
How do I get the video to play automatically when I first load the page?
Thanks
have you tested it in chrome? for chrome you need to switch off sound:
<video autoplay muted loop> ... </video>
and at least on some versions of safari autoplay doesn't work at all. you might start your vid using jquery, something like:
<video id="video" ...> ... </video>
$(document).ready() {
$('#video').play();
}
I would like to add auto-play muted video at the top of the home page of my website, I am using angular 5.
Can anyone help please?
Thank you in advance!
You can do it only in HTML as well. Here is my working example:
<video [muted]="'muted'" autoplay="autoplay" loop="loop" playsinline id="video-start">
<!-- Dynamic Content -->
<source *ngIf="backgroundVideo?.Link?.Url" [src]="backgroundVideo.Link.Url" type="video/mp4">
<!-- Default Content, displaying when dynamic content has a problem -->
<source [src]="baseURL + '/SiteAssets/assets/videos/film_kpmg_home.mp4'" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Be careful about that, if you write only muted="muted" instead of [muted]="'muted'", autoplay could not work fine in an angular project.
And, for autoplay property, you need also to use 'playsinline' attribute for only mobile browsers. It makes no difference for desktop.
you can write this code directly to your component.ts file
window.onload = function () {
var element = document.getElementById('video');
element.muted = "muted";}
this my html code..
<video id="video"><source src="assets/images/intro.mp4" type="video/mp4">
</video>
Hello guys im struggling with displaying gif image in mp4 format:
<video width="320" height="240" >
<source src="http://media4.giphy.com//media//64zSh1uTE7xxm//100w.mp4" type="video/mp4"/>
</video>
that's my code, but only first frame is beeing loaded, then everything freezes.
//
edit
I have remade it into this:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1"/>
<title>Insert title here</title>
</head>
<body>
<video width="320" height="240" >
<source src="http://media4.giphy.com//media//64zSh1uTE7xxm//100w.mp4" type="video/mp4" autoplay/>
</video>
</body>
</html>
but still its static image.
edit2// I'have added
controls="controls"
since In XHTML, attribute minimization is forbidden, and the autoplay attribute must be defined as video autoplay="autoplay".
You need to play the video, too, because by default it will pause at 0:00. There are 3 possible solutions to this problem.
Use the controls attribute (<video ... controls>) to show the
controls and play it manually
Use the autoplay attribute (<video ... autoplay>) to
autmatically play the video once it has loaded
Get the element via JavaScript and play it there (same behaviour as
autoplay in this solution):
var video = document.getElementById ("videoElement");
video.addEventListener ("loadedmetadata", function () { video.play (); });
For further information on HTML5-Video attributes, check out MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
I'm not too proficient in HTML myself, but I've experienced this problem too. The reason why the video is frozen on the first frame is because, by default, the video is paused at 0:00, which means it will simply not play without user intervention or code to play itself. There are two solutions to this:
Either include controls to this video, which can be done by changing the <video width="320" height="240"> to <video width="320" height="240" controls> or
Include autoplay by adding the autoplay attribute, which can be done by again changing <video width="320" height="240"> to <video width="320" height="240" autoplay>.
Hope this helped!
You forgot the full construction.
<video width="320" height="240" controls> </video>
instead of controls you can use other attributes.
autoplay - Specifies that the video will start playing as soon as it is ready
controls - Specifies that video controls should be displayed (such as a play/pause button etc).
height- Sets the height of the video player
loop - Specifies that the video will start over again, every time it is finished
muted - Specifies that the audio output of the video should be muted
poster - Specifies an image to be shown while the video is downloading, or until the user hits the play button
preload - Specifies if and how the author thinks the video should be loaded when the page loads
src - Specifies the URL of the video file
width - Sets the width of the video player
For more informations go to: w3schools
Add the autoplay property to the video tag, e.g.:
<video width="320" height="240" autoplay>
site: http://www.ignitionpointventures.com
Hello All,
I am having html5 video loading issues on chrome/safari. The basic idea is that there is a video container with video thumbnails on the right side. I have created a separate html file containing each video's html5 video info to be placed in the video container. On page load the first video automatically should load using jquery document ready, subsequently each thumb loading the appropriate html5/video.
Issue:
On Chrome and Safari.
On Chrome the video on load does not appear. On clicking the thumbs the first image of the video appears in the main video div, but appears to stop loading and will not play.
On Safari the video does not load at all. When trying to play the file directly it has an error and the quicktime symbol shows up with a ? mark.
Here is an example of the html5 video
<video width="721px" height"406px" preload="auto" controls="controls">
<embed src="http://www.ignitionpointventures.com/includes/video/v1/v1.mp4" width="721" height="406" allowscriptaccess="always" allowfullscreen="true"></embed>
<source src="http://www.ignitionpointventures.com/includes/video/v1/v1.mp4" type="video/mp4" />
<source src="http://www.ignitionpointventures.com/includes/video/v1/v1.ogv" type="video/ogg" codecs="theora, vorbis" />
<source src="http://www.ignitionpointventures.com/includes/video/v1/v1.webm" type="video/webm" />
<p>Your browser does not support HTML5 video.</p>
</video>
Here is the javascript
<script type="text/javascript">
$(document).ready(function(){
$('#leftVideo').load('http://www.ignitionpointventures.com/includes/video/v1/v1.html');
});
$(function() {
$(".v1").click(function(){
$('#leftVideo').load('http://www.ignitionpointventures.com/includes/video/v1/v1.html');
});
$(".v2").click(function(){
$('#leftVideo').load('http://www.ignitionpointventures.com/includes/video/v2/v2.html');
});
$(".v3").click(function(){
$('#leftVideo').load('http://www.ignitionpointventures.com/includes/video/v3/v3.html');
});
$(".v4").click(function(){
$('#leftVideo').load('http://www.ignitionpointventures.com/includes/video/v4/v4.html');
});
});
</script>
I checked the .htaccess file also
I know the videos are a bit large and could be an issue, but doubt this is the real problem. yes the javascript could be more advanced.
Thanks!