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.
Related
The autoplay background hero on my website recently stopped working due to Chrome's new autoplay blocker. There is no audio so I'm confused as to why...please assist.
www.homecareassistancemontreal.ca
It stopped, because Chrome doesn't want any sound-generating videos to start without user's direct agreement (e.g. starting it). If you want video to autoplay you must ensure it is muted.
To do so you must add muted attribute to your <video>.
<video muted>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
You can read more about this here.
Videos must be muted.
<video muted>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
One issue I recently come across with Chrome was that if you're adding Video elements via JavaScript and you're setting your muted attribute to true. Google will block playback if you're using .setAttribute. Use dot notation instead.
Bad
VideoElement.setAttribute('muted', true);
Good
VideoElement.muted = true;
There is a smart hack that will autoplay video with sound without any problem:
navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
video.play(); // play your media here
// stop microphone stream acquired by getUserMedia
stream.getTracks().forEach(function (track) { track.stop(); });
});
It will ask users for their Microphone permission (only first time in chrome) and they have to click Allow then you are permitted to play anything with sound. It works because as long as you are capturing anything then you are allowed to play everything and then stop the microphone stream when your media starts playing.
I tried to add default WordPress audio player in the normal HTML table. i want to display all the three below div in same line even in mobile devices. Any possible to do like this or any option to show only play button in audio player or using html5 audio player.
<table><tbody><tr>
<td><div>My audio</div></td>
<td><div>[audio src="http://cldup.com/uMFLx60B4V9/9j8WQE.mp3"]</div></td>
<td>Date</td>
</tr></tbody></table>
Replace your DIV
<div>[audio src="http://www.website.com/123.mp3"]</div>
with this HTML5 tag
<audio controls>
<source src="http://www.website.com/your_file.mp3" type="audio/mpeg">
</audio>
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.
I will host videos from my server for users. Users can embed videos... Currently I am writing the php script. But I have a problem with embed codes. The problem is, cannot fullscreen on html5... Player support html5 & flash player. If player is flash users can go fullscreen from embed code. But on html5 player can't go fullscreen. Youtube's embed codes can go fullscreen but YouTube uses html5 too. Here is the code that i used:
<iframe width="530" height="270" src="http://videohost.tk/embed/0f2c67c9b" frameborder="0"></iframe>
If you enter the link directly you can go fullscreen. But on iframe you cannot... How can I fix it?
I think your iframe element needs to include the allowfullscreen attribute.
Here is the update code with the new fullscreen attribute as an example:
<iframe width="530" height="270" src="http://videohost.tk/embed/0f2c67c9b" frameborder="0" allowfullscreen></iframe>
Just wanted to point out: For IE to recognize the frameborder attribute, it needs a capital B, as in frameBorder. All other browsers seem to recognize both options, so the 'B' is a good failsafe for compatibility. According to the MSDN docs, allowfullscreen should work just fine in IE, although that might only pertain to HTML4.
As I would like to be able to manipulate the z-index of an embedded Youtube playlist, I tried adding the html5 parameter, set to 1, but this seems to work for single video embedding only.
This works:
<iframe width="300" height="225" src="http://www.youtube.com/embed/VIDEO_ID?html5=1" frameborder="0">
But this doesn't:
<iframe width="300" height="225" src="http://www.youtube.com/embed/videoseries?list=PLAYLIST_ID&html5=1" frameborder="0">
Many thanks :)
You are forcing the html 5 player the right way, youtube doesn't support this at the moment this will only work for single video's.
There are other solutions to have a html5 player play multiple youtube video's in html5.
Using mediaelement.js you can build something yourself (check which vid is playing, which one's next, if a video's finished, etc...). http://mediaelementjs.com/
After a quick Google I found a HTML5 player which actually has playlist support: http://mediafront.org/osmplayer/#.UK1L3eOe-pY