I'm working on this site using canvas video with MediaElement.js library. It works fine in desktop browsers but not displaying anything in mobile (android chrome 56).
The weird thing is that when I remove mp4 and ogg source, only use 'webm', at first it still not displaying anything but when I turn my device upside down it works?(maybe need to resize the screen to trigger it?) the videos displaying. So I want to ask:
1/ Incase I have to use 'webm', is there anyway I can tell my web that only use 'webm' type when in tablet & mobile without removing mp4 & ogg source?
2/ do you have any idea how to fix it?
I have tried add muted attr and use absolute urls but still not working.
<video id="myVideo" loop="loop" controls="controls" width="300" height="150" muted>
<source src="/wp-content/uploads/videos/video.mp4" type="video/mp4" />
<source src="/wp-content/uploads/videos/video.webm" type="video/webm" />
<source src="/wp-content/uploads/videos/video.ogv" type="video/ogg" />
</video>
$(video).bind("loadedmetadata", function () {
video.play();
});
$(video).mediaelementplayer({
success: function (mediaElement, originalNode) {
}
});
Thank you very much.
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 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 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/
I'm trying to get a video to work with videoJS and with the help of the videoJS guide I got it working on Chrome and Firefox, but not IE8.
I've added the CDN tags to my head and created a videotag.
I'm using the following:
<video id="my_vid" class="video-js vjs-default-skin"
controls preload="auto" width="244px" height="196px"
poster="img/poster.jpg">
<source src="files/mymov.mp4" type='video/mp4' />
<source src="files/mymov.webm" type='video/webm' />
<source src="files/mymov.ogv" type='video/ogg' />
</video>
It seems like the Flash fallback isn't working in IE8, since it doesn't create a flash object when I look in my inspector (which it does at the homepage of videojs.com). The video tag just remains, and IE8 can't cope with that. The video on the homepage of videojs.com is shown properly in IE8.
What am I doing wrong?
Solved: It seems like I had to add data-setup="{}" as an attribute in the video tag. The only problem now is that the video won't play in Chrome.
You can force videJS to display flash. You can use rtmp streaming to use flash
vjs.options.techOrder = ["flash", "html5", "links"];
$(document).ready(function() {
setTimeout(function() {
vjs("videoPlayer").ready(function() {
var swfVideo = $("#videoPlayer_flash_api")[0];
swfVideo.vjs_setProperty("RTMPConnection", "path");
swfVideo.vjs_setProperty("RTMPStream", "videoName");
});
}, 1000);
});
I have a web site and I want to link a button to a video. So whenever someone clicks the "video" buttons let's say, I want to open the video.mp4 in a new browser. What I do is:
<div>...</div>
The video is quite big (190MB) so the code above is not working. I start listening to the sound but cannot see the image.
Does anyone know how to do it? Or any simple way to just open this video as a link?
You could use HTML5 tag don't forget that MP4 is only supported by IE 9+, Chrome 5+ and Safari 3+. You should at least convert your file to WebM or Ogg to make it compatible with all recent browsers.
To do so you would need a new page (where the link goes) and in this page have this code:
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
/* instead of the last line you could also add the flash player*/
</video>
The browser will automatically select the first known format and play it. (source: w3Schools.com)
Hope this helps!