MIME type is accepted, I've checked.
Here is how it is looking like: https://trello-attachments.s3.amazonaws.com/5441bde46b6fcb86daf55d73/594x351/122b8cad9f5824c44fa25fb242569312/upload_5_14_2015_at_5_10_18_PM.png
Here is the website in question (go to animation in menu): www.ivocunha.com
Here is the code I'm using:
<video width="100%" height="100%" controls autoplay loop class="bl-box fancybox-effects-d" title="Walk">
<source src="img/animation/walk.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Why doesn't it autoplay?
Firstly you are using section tags to wrap your video in you should not use sections for content that does not have a heading. It is not a wrapper.
as for your video remove auto play because they are auto playing by the looks of it but using auto play within your video tag triggers auto play from page entry and they are all playing at the same time.
you then want to use your jquery and create an on hover that will play your video and pause it on exit. your code doesnt seem to be doing that at all on your site instead its only trigering for points.
I would give this a read over so you can see how to use the api properly.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video
Related
I want to insert a video into my HTML page with the video tag. Here is my markdown (I am developing an ASP.NET MVC application, and symbol ~ means project root):
<video controls>
<source src="~/show.mp4" type="video/mp4">
Cannot load the video.
</video>
But it just shows white space with video controls. Here is a screenshot:
And the slider in the video controls does not move (i.e. the video is not playing), although the "pause" icon is shown, which should mean: the video is playing.
What I have tried
Adding src attribute to video tag.
Opening the menu in the right of video controls panel and clicking "Download". It downloaded my video. When I played it with Windows Media Player, it showed exactly what I have recorded.
Removing type attribute from source tag.
Removing source tag (and leaving only src attribute in video tag).
Moving the slider in video controls panel. Still white space.
Setting controls="controls" in video tag.
Surfing the Internet (including Stack Overflow).
Now I asked my own question.
HTML5 video player has been showing controls only in iOS 12.x.x even when the controls are set to false in video tag but all other browsers are working fine and don't show the controls.
The scenario is that whenever page loads we autoplay the video on banner but if battery saver feature is turned on then it will not autoplay the video shows the play button with initial thumbnail (only in iOS 12.x.x) while in other browsers it shows the initial thumbnail of the video without any play button.
My code looks like this:
<video id="header-video" autoplay="true" controls="false" playsinline="true" muted="true" loop="true">
// sources here
</video>
I am looking for the solution to hide this play icon (shown in attached image) but if that's not possible then is there any solution through which I can know that power saving mode is turned on and hide the video (because I have a background for backward compatibility).
I've given a look as well, and it seems as many CSS and JavaScript solutions out there don't work anymore, because since iOS 12 there is a new way of handling videos (https://www.reddit.com/r/apple/comments/8p4tpm/ios_12_to_include_custom_html_video_player/).
Now I came up with this idea, which as a purist I don't like, but it might do the trick: A video thumbnail (as image) overlayed over the video, that gets hidden, once the video is started.
You could have a standard thumbnail with title, or dynamically generate it (see http://usefulangle.com/post/46/javascript-get-video-thumbnail-image-jpeg-png as an idea).
Hope this helps!
I know this was asked over one year ago but I wanted to share the solution for others.
What I did was, I removed the autoplay attribute from the video-element and because I still wanted it to behave as with the attribute I added following js.
const video = document.getElementById('video-input');
video.play();
Setting autoplay to false and controls to false did work for me:
<video
src='xxxx'
muted
className='landing__empty-video'
loop
playsInline
autoPlay={false}
controls={false}
preload='auto'
type='video/mp4'
/>
Bear in mind this was React, in html case it would be "false".
After trying several solutions on the internet and without success, I eventually managed to hide the video interface elements in autoplay when the save mode is enabled.
document.getElementById("hello").setAttribute("autoplay", "autoplay");
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="hello" playsinline preload muted loop>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</body>
</html>
https://jsfiddle.net/joelsilvaaaaaa/yb5s23xq/3/
As you can see in the first image the video is correctly being shown:
But in the mobile version it doesn't show the poster. It just shows a play button. And then even if I click the play button nothing happens:
How can I make the video mobile version look like the desktop version? I'd like their to be a poster image with a play button over it and then when play button is clicked it plays.
HTML
<video style="width:40%; display:block; margin:0 auto;" controls>
<source src="/assets/fake-prince.m4v" type="video/mp4">
</video>
There is a <video> property called poster that should do the trick. You can read about it here. Simply specify an Image file that you want showing until the user hits play.
<video style="width:40%; display:block; margin:0 auto;" poster="image-file-location-here" controls>
<source src="/assets/fake-prince.m4v" type="video/mp4">
</video>
EDIT:
Put the <video> tag inside <div class="blog-body"> instead of the <p> tag.
<div class="blog-body">
<video style="width:40%; display:block; margin:0 auto;" controls="true">
<source src="/assets/fake-prince.m4v" type="video/mp4">
</video>
</div>
Also you are overusing the <p> tag. As stated in the comment below, <p> is used for paragraphs, however you seem to use them to create margins in between elements. I recommend using CSS's margin property to achieve the same effect with better performance.
To add to Blom's answer, the video on your site if m4v format which often seems to cause issues with playback, even on apple devices (I just downloaded and tested it on a MAC and it opened it as a MetaData file initially rather than played the video).
m4v is (in very simplistic terms...) an mp4 video container with some extra bits to allow iTunes add copy protection.
In your case you don't seem to be using copy protection so you may find that simply changing the file extension from m4v to mp4 will allow it to play on most platforms (it works on the Mac for example).
I am trying to embed a video file (mp4) into my HTML document. I would like this video to play without being paused and without being closed/minimized.
<video width="320" height="240">
<source src="mov.mp4" type="video/mp4">
</video>
I am using this code to play a video in HTML. But I am not able to remove controls from the video. If I right click on the video, I still get the control options.
So I would like to know if there is a way to disable controls on this video or use another player which can remove controls.
I would also like to know if I can dynamically write some display data on the video space while it is being played.
I am having an issue with getting HTML5 video to autoplay on load into Fancybox.
I have an HTML5 video loaded into a div that is hidden and therefore can't have autoplay enabled in the tag. I then call it one an image click with a Fancybox inline and a ref to the div.
Everything works as it should except I just want the video to play when then Fancybox opens it?? Any ideas would be appreciated.
You can autoplay the video as soon as it is opened in fancybox. The problem with the inline video is that if you close it then it will pause and the next time you open it in fancybox, the video will be open in the same place/track it was when closed ... and it won't "auto-resume" (the action is autoplay on start).
Anyway, this option should do the trick:
'onComplete': function(){
$("#myVideo").find('video').attr('autoplay','autoplay');
}
#myVideo is the ID of the DIV, which contains the video tag.
Since you are using the inline method, it would worth to have a look at one existing bug and its workaround here.
Eventually, you may prefer to use the API option 'content' instead, to avoid the inline type issues:
'content': '<video autoplay="autoplay" preload="none" poster="path/image.jpg" width="640" height="360" controls="controls"><source autoplay="autoplay" src="path/video.ogg" type="video/ogg">your browser does not support the HTML 5 video tag</video>'