在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:learn-co-students/html5-video-embed-lab-online-web-sp-000开源软件地址:https://github.com/learn-co-students/html5-video-embed-lab-online-web-sp-000开源编程语言:Ruby 96.1%开源软件介绍:HTML5 Video Embed Code-AlongProblem StatementAdding images to HTML content is a great way to make websites more appealing and engaging for your users. Sometimes, though, we want just a little more pizzazz and we need to add glamorous video content. In the past, adding video to HTML was only possible using the In this lesson, we will be exploring the HTML Objectives
Introducing Embedded VideosThe In a basic implementation, like <video src="videofile.ogg" autoplay poster="posterimage.jpg"></video> While you will certainly see this style on the internet, we recommend the following approach because it ensures the greatest amount of compatibility. We can wrap the <video>
<source src="https://s3.amazonaws.com/ironboard-learn/cat_video.mp4" type="video/mp4">
<source src="https://s3.amazonaws.com/ironboard-learn/cat_video.ogg" type="video/ogg">
</video> Why two sources? Compatibility! When HTML is rendered, the browser will try to load the first source. If it fails, it will fall back to the second source. All modern browsers support MP4 files. If we had the above video on a website, its likely that more than 99% of visitors will see the MP4 version. However, if a site visitor is still using an older version of a browser like Firefox, the MP4 file will fail to load. At this point, the OGG file will load instead. It is still useful to have an alternate video format for this reason. In addition to multiple sources, we can provide a fall back message. This message will appear to users in the event that they are using a browser that is so out of date, it doesn't support HTML5. For this, we add something like this: <video>
<source src="https://s3.amazonaws.com/ironboard-learn/cat_video.mp4" type="video/mp4">
<source src="https://s3.amazonaws.com/ironboard-learn/cat_video.ogg" type="video/ogg">
Your browser does not support HTML5 video <a href="https://browsehappy.com/" target="_blank">Please upgrade your browser</a>
</video> If a user was still hanging on to Internet Explorer 8 (they are out there), they won't see the video content. Instead, they will see the message "Your browser does not support HTML5 video", followed by a link to browsehappy.com, where they can download an up-to-date browser. Video Tag AttributesThe
The The Building a Video ElementIts time to apply what we've just learned! In Caution: The music in these videos may be loud
To complete this lab:
Run ConclusionWith the We can customize the size of the video on our page and make sure our video is viewable by every site visitor. This way, we're not just catering to those with the most up-to-date browsers. In addition to View HTML5 Video Embed Code-Along on Learn.co and start learning to code for free. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论