Am tasked with building an ASP.NET 4.0 Web Forms site to support playback of YouTube videos. Will build it as a HTML5 site but am trying to weave my way through the maze of video formats/codecs.
I do not want to use plugins and I want it to have cross-browser support:
IE9/IE8/IE7
Firefox
Chrome
Safari
Majority of traffic will be IE. For the other browsers, latest versions will suffice.
I'm looking to embed the videos directly. Really just need to know how to cater for the different browsers without use of plugins (incl. Google Frame).
Can anyone provide some guidance/direction?
UPDATE
Per Stilgar's answer, there probably will be no advantage gained to creating this as HTML5
If you only need to embed videos from youtube you don't need to care about codecs and browser support. You only need to render the Youtube embed code on your page which is just an iframe. The user can get the html by clicking share > embed on youtube or you can generate it programatically when the user pastes an URL to an youtube video. The code looks like this:
<iframe width="560" height="315" src="http://www.youtube.com/embed/Kt82xgsm9N8" frameborder="0" allowfullscreen></iframe>
If you do this youtube will provide a player for the user. The player will be based on the user's settings IN YOUTUBE. For example if the user has selected HTML5 videos on youtube he will get an HTML5 player for his browser. If the user has opted in for Flash or is using an older browser youtube will serve the Flash player. Also some videos (those with ads) are only available with Flash.
Basically even if you want to do something else you can't. That's how Youtube works and you want to embed their videos not serve your own. However I don't see why you will want something different from what they provide. They make their best to support every browser in the best way.
And just FYI the video tag is supported on the latest version of all browsers and is not supported in IE8 and IE7. There are two codecs (with 2 formats) that are important right now these are H.264(mp4) and VP8 (webm)
Safari (including Safari on iOS) and IE9+ (including IE on Windows Phone) support H.264
Chrome, Firefox and Opera support VP8
If you want to support all browsers via the video tag you need to provide both encodings and encode the video twice.
If you want to support IE7 and IE8 your only option is a plugin (be it Flash, Silverlight or just regular old Media Player Plugin that comes by default)
I haven't used it myself yet but I've heard some good things about jPlayer. Check out http://jplayer.org/.
One thing to keep in mind is that while many browsers support HTML5 semantics, they don't support the same codecs. You'll need to encode your video into the various formats that each browser supports. Wikipedia has an example at http://en.wikipedia.org/wiki/HTML5_video.
<video poster="movie.jpg" controls>
<source src='movie.webm' type='video/webm; codecs="vp8.0, vorbis"'/>
<source src='movie.ogv' 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>
Related
On my webpage there is only a video. It is playing well on Edge but not on Mobile Device and Chrome.
the video is .mp4
autoplay is disabled
I am using OceanWP theme but I tried also Astra theme without any success
I am using Elementor to edit the page
There are many questions on this topic but none of them has a solution that fixes my problem.
EDIT
From the official Apple WebKit documentation (iOS):
Starting in iOS 10, WebKit relaxes its inline and autoplay policies to
make these presentations possible, but still keeps in mind sites’
bandwidth and users’ batteries.
By default, WebKit will have the following policies:
video elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
video muted elements will also be allowed to autoplay without a user gesture. If a element gains an audio track or becomes un-muted without a user gesture, playback will pause.
https://webkit.org/blog/6784/new-video-policies-for-ios/
As for Mobile Chrome (Android):
Muted autoplay for video is supported by Chrome for Android as of
version 53. Playback will start automatically for a video element once
it comes into view if both autoplay and muted are set, and playback of
muted videos can be initiated progamatically with play(). Previously,
playback on mobile had to be initiated by a user gesture, regardless
of the muted state.
https://developers.google.com/web/updates/2016/07/autoplay
Example:
<video id="myVideo"muted defaultMuted autoplay playsinline controls>
<source src="myVideo.mp4" type="video/mp4">
</video>
Your video preview shows the video file is not working. You should see a thumbnail of the video file such as this:
I'm not sure why, but it could be that the file on the server was moved/renamed/deleted since you added the video to this page. One explanation it is working on Edge but not mobile is perhaps the image was cached previously on the Edge browser.
If you remove the image and try to re-add it through Elementor, can you reproduce the problem?
Another idea is you may have a slightly corrupted video file. Try editing it in any video-editing program (several free online ones) and see if exported file works in your page.
I'm using Flowplayer6 / HTML5 wordpress plugin to play videos on the site.
I have trouble playing the player on the phone. By clicking on the player, the video does not run .
Please find an online example of the problem below:
http://www.muzika.com.br/vertice/player_portacurtas/filme/?name=j_carlos_o_cronista_do_rio
obs .: the 5/2 is normal to stop the video.
According to the know issues section in flowplayer documentation, it seems that:
Mobile devices and iOS do not support automatic playback on page load.
Volume and mute state cannot be controlled on mobile platforms and
iOS.
Mobile phones and iPod do not allow inline playback in the
browser. The native player component takes over entirely. They
therefore also do not fully support the JavaScript API, especially
when it comes to interaction with the page.
You will find in the documentation some workarounds, but maybe this is not the right plugin for what you need.
I uploaded a video to Google Drive and I created a blog in Blogspot. Then, I inserted a code like this in one of my blog posts:
iframe width="560" height="315"
src="http://drive.google.com/file/d/0B21fQyiIJBBnWms0S2UyaUFNeWM/preview"
frameborder="0" allowfullscreen="true" / iframe
I have tested the code under the following conditions and get the following results:
When using my PC, I can go to fullscreen and select the video quality/subtitles (another button);
When using Safari for iPad, I can see the video quality/subtitles button, but can't go to fullscreen;
When using Mercury Browser for iPAD with user-agent "Safari (iPhone Mobile)", I can't see/use the video quality/subtitles button, but now I am able to go fullscreen;
Google Drive's app from App Store can't use the video quality/subtitles button, but is also able to go fullscreen;
Puffin browser (app from App Store) is able to use the video quality/subtitles button and go fullscreen. However I stopped using this for 2 reasons:
Video takes a lot of time to load. In Safari, it takes a couple of seconds. Using Puffin, over 10. Don't know why, but it looks like it's either my iPad that is slow (4th gen, last iOS), or this is to be expected;
Even when the video is playing, it looks like playback is stuttering. I mean, not running smoothly, as the same browser does in the Youtube website. BTW, Puffin supports Flash, but until recently, this functionality was paid and lasted only a short time;
My questions are:
why is 2) happening?
Can it be fixed by using another CODE in my personal blog/website or I do need to wait for future iOS updates?
Also, Youtube's iframe allows us to go fullscreen in Safari from iPad. Which means Google is to be blamed (I guess) for this to happen with Google-Drive.
I wonder if there's a way to bypass this restriction, and force the player to go fullscreen, also showing subtitles, as it happens with Youtube.
So I'm using YouTube's iframes in order to show some videos in my app. The thing is I cannot make the videos fullscreen.
I'm using this code:
<iframe width="560" height="315" src="http://www.youtube.com/embed/RnYcPJTtV1A" frameborder="0" allowfullscreen></iframe>
If you write that on a single html file the browser (all of them) will show you the fullscreen button on the far right. But, that same code on a Win8 app (html of course) will display the video but will not show the fullscreen button.
Do you thing that's what YouTube (google) wants? I mean, should I be doing anything different?
Regards
Sebastian,
Something to keep in mind is that iframe within a Windows Store app is designed for limited use only. The certification requirement 2.4 states:
The primary experiences your app provides must take place within the
app
One needs to be very careful about including content from sites you do not control via iframe in a Windows Store app, because this content can change without warning in ways that may break your app or introduce unexpected behavior.
Because YouTube videos may use either Flash or HTML5 for playback, you may find that some videos simply will not play in the context of a Windows Store app, because ActiveX controls are not available in that context.
Given all that, I would not expect to be able to play full-screen video embedding YouTube videos via iframe in a Windows Store app.
I had youtube channel where I had for in my web site to display this videos from youtube channel .I did my code well but I had a problem with IE browser the sound continuous after I closed the player as you must let the player work after it finished ,So what I can Do?
You probably didnt reset either the object or embed container or something.
Thing is that internet explorer embeds flash differently.
You probably just deleted the content element so it became invisible but did not unset the flash media.
consider using this widely used javascript library to take care of all that for you:
http://code.google.com/p/swfobject/