Update: This question is no longer valid. See comment below.
YouTube embedding is done using iframes nowadays.
HTML5 introduces the seamless attribute, that not only should affect presentation, but make the integration with the host page tighter. (It should not be announced to screen readers as a separate document.)
HTML5 introduces the sandbox attribute, that restricts the iframe and thus improves security.
In a world where browser support for these 2 attributes is complete, will they benefit or in any way adversely affect the page, when embedding YouTube videos? (Yes, the last half of the question is primarily about seamless.)
I am thinking about recommending my students to always use these 2 attributes for YouTube videos and benefit automatically as browser support becomes available.
I'll focus on just discussing the sandbox attribute.
To play YouTube videos in a sandbox you need to do the following:
Add sandbox="allow-scripts allow-same-origin"
Add ?html5=1 to the video URL
A problem with #1 is that Flash will not be loaded; whether Flash is required depends on a few things, such as the end-user's browser, their YouTube settings or when a video is simply not available as an HTML5 video (this is worsened by #2).
Another (more serious) problem with #1 is that the combination of allow-scripts and allow-same-origin effectively removes any security benefit you would have otherwise enjoyed.
Conclusion
Forget about using the sandbox attribute for YouTube video embedding.
Further reading
HTML5 Sandbox and some notes
Error playing embedded youtube video in a sandboxed iframe
No, fullscreen does not seem to work with both attributes enabled, if you are in the HTML5 beta check an example here:
http://bcmoney-mobiletv.com/view/2133/monty-python-tax-sketch/
However, when I leave the HTML5 beta program it plays back in the standard YouTube Flash player, which ignores those iFrame attributes completely.
So, it really depends what your goals are. If you want added security and an experience that feels more like an in-page web video that is controlled by your page, go ahead and use those attributes, however, if you want to give the user a full range of controls and options, leave off sandbox and/or seamless.
Related
I have videos on my website that are taking very long to load.
I don't think it is my webhost since it also happens on localhost.
Each time there is only 1 video shown to the user, depending which category they chose. (So it is not loading each video always).
The videos that take longer to load are the bigger ones (the biggest one is about 351MB video file)
This is my html code for the video:
<div class='video'><h2>$vidTitle</h2><video width='640' height='360' controls preload='metadata'><source src='$viddir' type='video/mp4'></video></div>
I've also read that it could be that the video indexing could be at the end, could this be the case?
What can I do about this, do I need to use another player thann the default html5 player (I tried this but it didn't really help) | do I need to use a cdn?
How can I solve this?
Thanks!
My understanding is that the preload='metadata' attribute in your video element is supposed to prevent the video from loading.
You could try preload='none' to test. I know that works.
As always, a good place to check is MDN web docs:
mdn web docs : The Video Embed element
Is there a good way of using JWplayer to instantiate a video tag in stead of a plain div?
Here's a support thread (https://support.jwplayer.com/customer/portal/questions/6062676-jw-player-not-working-with-video-tag), but basically JW admin comes back and tells the OP to not use a video tag at all.
This is the example markup from JW:
<div id="myDiv">This text will be replaced with a player.</div>
<script>
jwplayer("myDiv").setup({
"file": "http://example.com/myVideo.mp4",
"image": "http://example.com/myImage.png",
"height": 360,
"width": 640
});
</script>
SEO wise, this is utterly useless, the video won't get crawled if it's only instantiated into a plain div by JavaScript after page load.
What I want to do is to have a proper video tag on the page and then instantiate a JW player instance from it. This way the video tag is visible to crawlers without it having to execute JS (which not all do)
The JW Team removed the "support" for embedding over the <video> tag in the upgrade from JW5 to JW6, primarily because they were experiencing too many support issues with embeds failing as a result of conflicts between the initial <video> tag loading and what their code was trying to do.
I wrote an article in 2012 which explains the problem they were faced with: http://powered-by-haiku.co.uk/?p=1
Rather than fix it, they decided to go with the current embed into <div> solution.
Now, you can still technically embed over a <video> tag with JW6 and JW7 - you just need to ensure the "preload" attribute is set to "none" in the original tag, and that this video is also not set to autostart.
However, in terms of SEO using the current JW approach, there is still a way to allow search engines to index and show your videos in search - actually the biggest issue with the move away from embedding over native <video> tags is to do with accessibility - not SEO.
Check out https://developers.google.com/webmasters/videosearch/schema#adding-videoobject-to-a-video-page for details of how to add schema.org markup to your page to support video tagging.
Ideally, in time, JW will allow a built-in means to progressively enhance this Schema.org metadata and build a JW config object dynamically (like they used to do with the video tag) - as it stands however, you'd either need to do that yourself or duplicate the associated information.
Either way, the accessibility issue still exists!
I'm debating whether or not to store a video on my server and call it through an HTML5 tag, or upload the video onto YouTube and use an iframe to embed the YouTube link. I'm not sure which would work more efficiently, or the differences between each one. What are the differences between using a HTML5 video tag and using a YouTube link and iframe tag?
Using a self-hosted video with HTML5
Advantages:
Full Control over markup and interface
Disadvantages:
Browser support is in your hands
Video download will be slower on your server as compared to YouTube
Recommended Usage:
Use a javascript plugin like https://plyr.io/ which will help with cross-browser and responsive concerns. Serve the video from a CDN if possible
Youtube Hosted
Advantages:
Performant
Browser support is everything
Disadvantages:
YouTube branded by default
Little control over the interface
Recommended Usage:
Use iframe embed code provided by youtube. For responsive assistance, see http://embedresponsively.com/. Also plyr.io allows you to play YouTube videos.
For my experience with <iframe> and <video> tags:
I found an issue with the <iframe> tag when you want to do an autoplay for your video while using a mobile or tablet device with "Chrome" & "Apple".
In my case, I used to do a click function to play video, that's what is impossible with <iframe> tag, so I use the <video> tag to resolve the issue.
I would like to know what are the best practices while streaming a video in html5. I know you can't prevent people downloading video, but I just want to know the ways to make it harder.
You can use DRM protection to encrypt the video if this is the approach you want to take.
DRM is controversial (see Firefox discussion at link below) but it is being baked into the standards with HTML5 EME (Encrypted Meida Extensions) so is becoming more mainstream. EME essentially allow a browser request a trusted (by the video producer) element in the browser/device to decode and play an encrypted video. See a good overview of EME at the second link below.
https://blog.mozilla.org/blog/2015/05/12/update-on-digital-rights-management-and-firefox/
http://www.html5rocks.com/en/tutorials/eme/basics/
This approach may also allow you support a download and go use case - i.e. people will be able to view your video offline.
I have an audioless video implemented using HTML5's <video> tag. I'm trying to find out if auto-playing the video and automatically looping it (assuming I add a button to remove loop as well) would cause accessibility issues? I know there are rules regarding audio as well as video with audio that prevent you from doing that, so I'm also wondering if this video is practically considered a GIF.
The video can be found here for reference:
http://www.med.uottawa.ca/bmi/eng/lee.html
This is technically an accessibility violation if it plays for more than 5 seconds. It affects users with disabilities such as attention deficit disorder. You need to provide a button to stop the video from playing immediately, not only a button that disables the automatic loop.