I have my code in the html like this for a 40 second video I want on my website. The video converter that I used made my imovie video with an extra video type as you can see below. Is this is what's causing the video not to show up?
<video>
<source src="Hai_Fusion_landing_video.oggtheora.ogv" type="video/.ogv" />
<source src="Hai_Fusion_landing_video.webmhd.webm" type="video/.webm" />
<sporce src="Hai_Fusion_landing_video.mp4.mp4" type="video/.mp4" />
</video>
and my inline styling like this
<style>
video{
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
</style>
Nothing shows up. Also, does the video files have to be from your desktop or do you have to upload them online first so it is sourced from there before playing?
I would also like for it to autoplay and loop on silence if that helps.
<video width="320" height="240" controls>
<source src="Hai_Fusion_landing_video.webmhd.webm" type="video/webm" />
<sporce src="Hai_Fusion_landing_video.mp4.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
I honestly don't know about an .ogv video format support in major browsers.
Remove the dots in the extension type
Add a "does not support message" in case it's an old browser
Check if your video files are in the same folder as your html file, if not, your paths won't work. (Learn about relative paths)
Thanks to #Scooter and #Ed Cottrel for pointing out stuff in the comments.
Related
I have a page where I need to display videos with different extensions.
Example: .mp4, .wmv
<video width="100%" controls>
<source data-ng-src="{{video.url}}" type="video/*">
Your browser does not support this video.
</video>
I just put a star but it is not playing my video.Showing an empty screen.Can anyone please suggest me help.Thanks.
In case you need it to support multiple types of videos, you must add multiple source of those videos. The browser picks the appropriate one to play.
And moreover, your code doesn't contain the src attribute.
<video width="100%" controls>
<source src="http://www.educationalquestions.com/video/ELL_PART_5_768k.wmv" type="video/wmv">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
I went to this discussion from 2012:
How to load different video for mobile devices and desktop web version?
because I was having the same problem. My mp4, webm and ogg videos of 7MB or so work fine on my desktop computer but hang up miserably on my Android smartphone.
#Subhajit gave this sample code that he had tried unsuccessfully:
<video controls>
<source src="mySmallVideo.webm" type="video/webm" media="all and (max-width:600px)">
<source src="myVideo.webm" type="video/webm">
</video>
and was referred to a stackoverflow discussion on the best way to detect a handheld device.
But that only gave advice for detecting when the site was being viewed on a mobile device. Nobody offered alternative code to his sample, for showing a smaller version of the video after a mobile device was detected.
My responsive site CSS code has #media (max-width: media queries. The one for mobile devices is set at 500px. How could I modify the sample code of #Subhajit to show a smaller version of a video, perhaps referencing the media query #media (max-width: 500px) coding in my CSS file?
I'd rather not use mobile detection, commercial video players, or online storage sites.
Thanks, #Fabio Here is my code so far from your first suggestion:
<video controls>
<source src="portfolioVideos/testMovieWEnd480x270.mp4.mp4" type="video/mp4" media="all and (max-width: 500px)">
<source src="portfolioVideos/testMovieWEnd480x270.webmsd.webm" type="video/webm" media="all and (max-width: 500px)">
<source src="portfolioVideos/testMovieWEnd720x405.mp4.mp4" type="video/mp4">
<source src="portfolioVideos/testMovieWEnd720x405.webmsd.webm" type="video/webm">
I made two five-second "movies," consisting of a "test pattern" still which ends with a "the end" superimposed on it. The big movie for computer screens is 720x405 pixels and labeled "for 'puter." The small one for mobile screens is 480x270 pixels and is labeled "for mobile." When I alternate window sizes in Firefox and Safari (and refresh), they actually bring up the proper version. Chrome only shows the mobile version. (Reversing the order in the coded only makes everything worse.)
The mobile version also comes up when I enter the video html in Mobile Phone Emulator. But when I call it up on my Android smartphone, the vid is so minascule I can't read which version it is, or even click on it.
I looked at that the Chris Coyier page you recommended, but I couldn't figure it out. How would I search for more on this jQuery code? Thanks for previous and any possible follow.
I tried taking a couple of new tacks on this problem.
First, I tried using a jquery "window width" method and an if/else conditional to bring either a small or large version of the video into an iframe.
$(document).ready(function () {
if ($(window).width() < 550) {
<iframe src=... width="480" height="270"></iframe>
}
else {
<iframe src=... width="720" height="405"></iframe>
}
});
</script>
That didn't work. Safari and Chrome both give me an "Unexpected token '<'" error, which I understand "happens when you're including or posting to a file which doesn't exist." These files exist and work when opened directly. I tried using absolute urls, as recommended by #amenadiel, but that didn't work either.
Second, I tried "window location" with an if/else conditional.
$(document).ready(function () {
if ($(window).width() < 330) {
window.location.href = ...;
}
else {
window.location.href = ...;
}
});
This works when tested in the various simulated devices and window sizes on two online emulators. But it doesn't work on my Android smartphone. There, just a tiny, empty, unclickable video window in the upper left of the screen.
I may have answered my own question.
I found here:
https://github.com/etianen/html5media/wiki/embedding-video
this super simple code:
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body>
<video poster="poster.jpg" width="618" height="347" controls preload>
<source src="video.mp4" media="only screen and (min-device-width: 568px)"></source>
<source src="video.iphone.mp4" media="only screen and (max-device-width: 568px)"></source>
</video>
which seems, miraculously, to have worked. Check out this page,
http://willsoper.net/videoPortfolio.html
which contains two videos, each with a large and small version.
Try the "Test Pattern" one on the right first; it's only ten seconds long. The larger version is labeled "for 'puter" and the smaller one, "for Mobi." On my Samsung Galaxy Android in vertical position, the "Mobi" version appears. If I hit the back button, turn the phone to horizontal, and try it again, the larger, "'puter" version appears.
The video on the left, with the man, also has a small and large version and seems to work the same way. It is much longer and on my smartphone it sometimes re-buffers briefly once or twice.
Ironically, my previous coding worked in online emulators but not on my actual smartphone. This one works on my smartphone but not on the emulators.
I'd appreciate knowing what others, especially #Fabio , experience and how I might improve on the code.
well, Frist add class to each video
I have two videos with different size
<div class="fullscreen-video-wrap" height="800px">
<video id="video" class="vidbig" src="./picture/ThisEgypt.mp4" autoplay="true" loop="true" muted="false" width="100%" ></video>
<video id="video" class="vid-mobi" src="./picture/Dolphin.mp4" autoplay="true" loop="true" muted="false" width="100%" ></video>
</div>
and on css media query
#media only screen and (min-width: 900px){
.vid-mobi{
display: none;}
}
#media only screen and (max-width: 900px){
.vidbig {
display: none;
}
}
Well, you have 2 options:
1) Serving video based on media queries just as you mention. You simply set different sizes based on the device width, like this:
<video>
<source src="video-ipad.mp4" type="video/mp4" media="all and (max-width: 768px)">
<source src="video-mobi.mp4" type="video/webm" media="all and (max-width: 768px)">
<source src="video-mobi.mp4" type="video/mp4" media="all and (max-width: 480px)">
<source src="video-mobi.webm" type="video/webm" media="all and (max-width: 480px)">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
You can also use some JQuery screen detection as shown on this page
var mainVideo = $('#the-video');
if ($(window).width() < 1200 && medQualVersion) {
mainVideo.append("<source type='video/mp4' src='" + medQualVersionSrc + "' />");
} else {
mainVideo.append("<source type='video/mp4' src='" + highQualVersionSrc + "' />");
}
mainVideo.append("<source type='video/webm' src='" + webMSrc + "' />");
// Wait until sources are appended to call MediaElements.js
mainVideo.mediaelementplayer();
The second option is to simply server high quality video and resize it, like this:
video{max-width:100%; height:auto}
this way is bullet proof and always work, not to mention you serve better quality video. But of course, you'll have the data transfer issue, so for big videos I'd recommend method 1 .
I have a video that I am trying to position over a section on a website. On my test server the position is perfect but when I upload my new file to the online server the video stays centered and below all the other info on the site. How do I code this so the index1 file displays the video like my test server.
The code on my test server is:
<div class="#main_video" id="main_video">
<video width="460" height="260" controls>
<source src="include/promo_2012.ogv" type="video/ogg">
<source src="include/promo_2012.mp4" type="video/mp4">
</video>
</div>
I selected the div and positioned it at:
Relative<br/>
Top: -414<br/>
Left: -266
Any help would be greatly appreciated.
-Josh
Try,
#main_video{
float:left;
}
This should put it to the left. Here's a live example: http://jsfiddle.net/S6mmD/
And by the way, classes are used in HTML like so: <div class='red'> and in CSS: .red{color:#f00;}
ids are styled in CSS with the pound sign # like above.
Is it possible to cross-browser style the controls of a browser-native video such as video from HTML5's video tag?
I do not understand if it is possible or not, I can't find anything other than this article but it seem uses Javascript.
I would like to make the controls bar fit the video width; as you can see from the image attached, the controls bar excedes the video width.
HTML for the above image
<div class="video centered-content">
<a class="circle-canvas close-video" href="javascript:void(0)" id="video-close" rel="tooltipTOP" data-original-title="close">X</a>
<video width="63%" height="60%" id="video" class="video" controls>
<source src="<?php echo base_static_url();?>media/video.mp4">
<source src="<?php echo base_static_url();?>media/video.ogv">
<source src="<?php echo base_static_url();?>media/video.webm">
</video>
</a>
</div>
Here is a good example for styling native player controls(just tested in Chrome): https://codepen.io/BainjaminLafalize/pen/GiJwn
To change the width of the player controls bar:
video::-webkit-media-controls-panel {
width: 40px;
}
You can style native controls in some browsers, using shadow DOM. Enable shadow dom in debug inspector settings:
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
HTML5 Video Controls - make larger?
You could style the shadow DOM, but you need to look at every browser individually and a browser update could destroy your styling.
I recommend taking a look at MediaElement.js which gives you cross-browser controls that can be styled using CSS and are already accessibility-optimized.
Or if you only need a few controls anyway, build your own: https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics
i have a task to Upload video and play in different browser. i have tried playing a .Mp4 video on different browser
i have tried implementing the iframe like
<iframe id="frame1" runat="server" visible="false" style="height: 222px; width: 482px;">
</iframe>
and tried implementing it src at runtime as:
frame1.Visible = true;
frame1.Attributes.Add("src", objLessionsInfo.VideoPath.ToString());
It works at chrome. but not in firefox and IE
I also tried implemeting the video tag of HTML5 as
<video controls="controls" tabindex="5" class="Video">
<source src="Videos/2.webm" type="video/webm" >
<source src="Videos/2.ogv" type="video/ogv">
<source src="Videos/2.mp4" type="video/mp4">
Your browser does not support the <code>video</code> element.
</video>
the same works at Chrome but not in Firefox and IE as .mp4 works on chrome but firefox doesn't support. i have tried with .webm format it plays at firefox.
i am confuse with the concept of how to make a video support to a different browser or how to structure this task.
whether should i check browser and play a video for that particular browser ( in this case i have to upload a video in different browser)
or is there any universal plugin that can play a video in all browser
need help on it. Thanks for any assistance.
Try a HTML5 video plug-in, like
Mediaelementjs.com
videojs.com
those plug-ins are automatically taken care of your browser compatibilities. ".mp4" is the good enough. If you don't have other video extentions(.ogg or .webm), plug-ins will automatically convert it to FLASH object.