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).
Related
I have working code for a video element within my site thats fully functioning on ios 9/10 and all the normal browsers (chrome/ff/ie) etc.
I've noticed that since the ios 11 update the videos no longer play or even work at all. They appear as a blank box with the controls but pressing play does nothing and opening the video full screen does nothing.
Here is my relatively simple code
<video playsinline onclick="play()" controls autoplay
controlsList="nodownload">
<source src="assets/images/video_im.mp4" type="video/mp4">
</video>
I've tried different variations of using playsinline="true" and controls="true". They have no effect.
I've tried to google the issue but there seems to be nothing except a podcast taking about ios 11 removing html5 video support, surely there is a fix?
Any insight/help would be much appreciated.
Cheers
It looks like the following code:
<video>
<source src="path/to/video.mp4">
</video>
stopped working on ios11 (with many other features too...). I confirm that source tag did work on ios9 here). Try placing the src="path/to/video.mp4" into the video tag directly, it should work on ios11.
A working example taken from webkit.org post on New video Policies for iOS:
<div id="either-gif-or-video">
<video src="image.mp4" autoplay loop muted playsinline></video>
<img src="image.gif">
</div>
Safari on MacOS seems to have a similar problem, maybe it's easier to test there. Looks like we lost the multiple source feature tho :(
I had a similar problem with videos not playing on Safari. The problem was my web server. I moved the video to another hosting server, loaded it from there and it worked.
e.g.
instead of:
<video src='/myVideo.mp4' controls> </video>
do something like this:
<video src='https://anotherServer.com/myVideo.mp4' controls> </video>
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
I have a video that I would like to embed in an O365 website using HTML5 embeding code. When I insert it, the video works fine but as soon as I click save the video area is just a black box and I can't play it. If I click to open it in another window it does play fine though for some reason.
The code I am using is the following:
<video width="320" height="240" controls>
<source src="my video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Any idea why this would be happening?
While my questions remains valid as I don't know why it is happening, I found a work around for anyone having the same issue.
Rather than inserting the html embed code I inserted a media web part which was much easier and worked! I recommend this route!
<video width="480" height="320" controls>
<source src="audiovisual/video.mp4" type="video/mp4"/>
<source src="audiovisual/video.webm" type="video/webm"/>
Your browser does not support the video tag.
</video>
But the video is not showing in IE9
It is amazing that when I enter into the developer tool (pressing key F12) and change the value for the width or the height it appears immediately.
it was hard to find it.
I move the code of the video to the beginning of the body, and it works. So I realized that it was a problem of the container of this element.
I start changing the css of the container and when I remove display:hidden; it shows the video (but I need the container to start hidden)
What I did was to change the previous code to width:0px; overflow:hidden; so when I change the width of the container (with jQuery) it works now the video.
Thanks.
I've got some stupid problem... Simple code:
<div id="start">
<video width="320" height="240" controls>
<source src="Content/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
on my project is not working. The video isn't displying, the path is correct... Div start has no special styling and for video is just set width and height as above.
When i checked example on http://www.w3schools.com/ everything works, when i check my browsers support for video it's all ok. And more funnier thing, that when i download the video than its downloading my proper video....
Ok, after some testing I can see your video on Mozilla Firefox but your video won't run in Google Chrome nor Internet Explorer. The situation you are facing is based on file formats. Each web browser will require a certain file format for your video, thus you will need to encode your video in several formats in order to make the video available for a wider range of visitors, depending on their browser.
The Wikipedia explains which file formats will better fit the needs of each web browser in the Browser support Section of the HTML5 video tag.
The proper application of the <video> tag in your code would look like this:
<video poster="movie.jpg" controls>
<source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'/>
<source src="movie.ogg" type='video/ogg; codecs="theora, vorbis"'/>
<source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
<p>This is fallback content</p>
</video>
Considering that you should supply individual video files for each instance of the sources inside the <video> tag.
Remember that your fallback content can also be an image, animated gif, a flash animation or even a youtube code (properly formatted) which will result in something being shown to the user if nothing works. Don't forget to include the measurements: fixed width and height in order to the fallback media fill the whole space where the video should show.
For your transcoding procedure, I suggest you to have a look at This answer in the AskUbuntu site where I explain how to compress your files with ease by using the Mobile Media Converter by Miksoft software.
I hope this help you but if you need further assistance don't hesitate to drop a comment.
Good luck!