I am using jquery mobile and video tag to display videos.
My video plays fine on all 'desktop' browsers, but when play when I use the following code in mobile safari (iPhone) it shows only black rectangle without any controls.
I used video used commonly in html5 examples. (from http://www.bigbuckbunny.org) so it shouldn't be encoding issue.
When I access video directly by typing its url http://myurlofvideo.mp4 it plays correctly in mobile Safari.
What's causing the problem?
Thank you in advance!
<video width="75%" id="video1" controls="true" autoplay="true">
<source src="videos/mov_bbb.mp4" type="video/mp4">
<source src="videos/mov_bbb.webm" type="video/webm">
Your browser does not support the video tag.
</video>
I tried the sample below in iphone simulator and it is working ,check it out .
<video width="320" height="240" controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
it shows preview image of the video,when you click on it plays in fullscreen.
Related
I have got stuck using a video tag in different browsers. In Chrome, this works perfect (video shows image and audio).
<video #myvideo [src]="urlvideo" height="300" style="width: 100%;" controls autobuffer autoplay playsinline webkit-playsinline="webkit-playsinline">
However, in Firefox it is not possible to hear the video (shows only image, controls show muted and disabled audio button). Also, in Opera it is not possible to view the video (can hear audio only, controls are visible).
Using source tag, adding or removing the optional attributes, it behaves the same way:
<video height="300" style="width: 100%;" controls autobuffer autoplay playsinline webkit-playsinline="webkit-playsinline" onloadedmetadata="this.muted = false">
<source [src]="urlvideo" type="video/mp4">
</video>
More info: Tried on Ubuntu and Windows, and the results are the same. Browsers DevTools does not show any incompatibility warning or error.
I guess I am missing something, do you know what could it be or have any advice? Thanks in advance.
Though mp4 should work across all browser I advise you to check other version too. Use below code that need other variation of videos.
<video width="100%" height="300" controls="controls">
<source src="media/intro.mp4" type="video/mp4"/>
<source src="media/intro.ogv" type="video/ogg"/>
<source src="media/intro.webm" type="video/webm"/>
</video>
I'm trying to add video to a portfolio site I'm working on, but it has this choppy quality to it, like it's lacking anti-aliasing.
Or it could be something else.. Does anybody have any clues?
It looks fine when I play it in a video player.
(Open the image in full view to see artifacts better)
Here's the code for the video tag:
<video width="100%" class="videoStyle" autoplay muted loop>
<source src="video/01-02.mov" type="video/mp4">
Your browser does not support the video tag.
</video>
I am trying to load this in a video tag but it is not loading. If I go to the link directly on my iPhone or android phone it will play without problems.
<video width="400" controls>
<source src="http://vod.ak.hls.ttvnw.net/v1/AUTH_system/vods_2f44/asiagodtonegg3be0_17169379616_331512496/high/highlight-22030149-muted-Y56G7SNUCG.m3u8" type="video/mp4">
Your browser does not support HTML5 video.
</video>
The correct type is application/x-mpegURL or vnd.apple.mpegURL
I'm having trouble with a video I'm using as a background -- it works correctly on firefox & chrome, however on Safari on load and when it loops, it flashes black for a moment.
Because it's looping the trick of having it fade in after won't work. I'm not really sure what's causing the issue. It's using a poster which loads correctly. the file is about 1.1mb.
Any ideas or solutions?
<video id="HeroVideo2" class="width100" loop="true" autoplay="true" preload="none" poster="/assets/videoposter.jpg">
<source src="/assets/hero.mp4" type="video/mp4">
<source src="/assets/hero.webm" type="video/webm">
<source src="/assets/her.ogv" type="video/ogg">
</video>
I have found that the issue was related to encoding in Handbrake.
I reencoded the video and made sure to check the "Web optimised" option and the new video no longer has the one or two back frames when viewed in Safari.
I have a HTML5 page using <video> tag and running .webm files. It all works quite smoothly.
However, I would like to not run the video on mobile devices and instead replace it with the .jpeg poster.
This is the setup now:
<video id="video" preload="auto" poster="video1.jpg" autoplay muted loop>
<source src="video1.webm" type="video/webm" />
<source src="video1.ogv" type="video/ogv" />
<source src="video1.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
Any ideas? Thanks!
You could hide the video-tags via media-queries and "display:none;" and then replace it with a for desktop hidden img-tag.
Sorry for the short answer... Written with my mobile ;) I'll update the answer as soon as I get home.
Most phones and tablets by default do not play video automatically, you will need to add a static background as a fallback for mobile devices.
https://www.aerserv.com/why-does-video-autoplay-on-mobile-devices-not-work/