How to Upload a Video With a Tag
— Updated
You've properly prepared a video file for the web. You've given it correct dimensions and the correct resolution. You've even created dissever WebM and MP4 files for different browsers.
For anyone to come across your video, you still need to add it to a web page. Doing so properly requires adding two HTML elements: the <video> element and the <source> element. In addition to nuts most these tags, this article explains attributes you lot should add to those tags to craft a skilful user experience.
Specify a single file #
Although information technology'due south non recommended, you can use the video element by itself. E'er use the type attribute every bit shown below. The browser uses this to determine if information technology tin play the provided video file. If information technology can't, the enclosed text displays.
<video src = "chrome.webm" type = "video/webm" >
<p > Your browser cannot play the provided video file. </p >
</video > Specify multiple file formats #
Recall from Media file basics that non all browsers back up the same video formats. The <source> chemical element lets yous specify multiple formats as a fallback in example the user'southward browser doesn't support one of them.
The instance below produces the embedded video that is used as an example afterward in this commodity.
<video controls >
<source src = "https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type = "video/webm" >
<source src = "https://storage.googleapis.com/spider web-dev-assets/video-and-source-tags/chrome.mp4" type = "video/mp4" >
<p > Your browser cannot play the provided video file. </p >
</video > Try it on Glitch (source)
You should always add a type attribute to the <source> tags event though it is optional. This ensures that the browser just downloads the file that it is capable of playing.
This approach has several advantages over serving dissimilar HTML or server-side scripting, peculiarly on mobile:
- Yous tin list formats in order of preference.
- Customer-side switching reduces latency; only i request is made to become content.
- Letting the browser cull a format is simpler, quicker, and potentially more reliable than using a server-side support database with user-agent detection.
- Specifying each file source's type improves network performance; the browser tin select a video source without having to download part of the video to "sniff" the format.
These issues are especially important in mobile contexts, where bandwidth and latency are at a premium, and the user's patience is likely limited. Omitting the blazon attribute can affect performance when at that place are multiple sources with unsupported types.
In that location are a few means yous tin can dig into the details. Bank check out A Digital Media Primer for Geeks to find out more near how video and audio work on the spider web. You lot can likewise employ remote debugging in DevTools to compare network activity with type attributes and without blazon attributes.
Specify starting time and terminate times #
Save bandwidth and make your site feel more responsive: use media fragments to add kickoff and end times to the video element.
To use a media fragment, add #t=[start_time][,end_time] to the media URL. For example, to play the video from seconds 5 to 10, specify:
<source src = "video/chrome.webm#t=5,ten" type = "video/webm" > You lot can also specify the times in <hours>:<minutes>:<seconds>. For example, #t=00:01:05 starts the video at one minute, 5 seconds. To play only the offset minute of video, specify #t=,00:01:00.
You can apply this feature to deliver multiple views on the same video—similar cue points in a DVD–without having to encode and serve multiple files.
For this feature to work, your server must support range requests and that adequacy must exist enabled. Most servers enable range requests by default. Because some hosting services plow them off, you should ostend that range requests are bachelor for using fragments on your site.
Fortunately, y'all tin can do this in your browser developer tools. In Chrome, for instance, it'south in the Network console. Look for the Accept-Ranges header and verify that it says bytes. In the image, I've drawn a red box effectually this header. If you lot do non run across bytes as the value, you'll need to contact your hosting provider.
Include a affiche image #
Add a poster attribute to the video element then that viewers have an idea of the content as presently as the chemical element loads, without needing to download the video or beginning playback.
<video poster = "poster.jpg" ... >
…
</video > A poster tin also be a fallback if the video src is broken or if none of the supplied video formats are supported. The only downside to a poster images is an additional file request, which consumes some bandwidth and requires rendering. For more information see Efficiently encode images.
Don't
Without a fallback poster, the video but looks broken.
Do
A fallback poster makes it seem as if the offset frame has been captured.
Ensure videos don't overflow containers #
When video elements are too big for the viewport, they may overflow their container, making information technology impossible for the user to see the content or use the controls.
You tin command video dimensions using CSS. If CSS does non meet all of your needs, JavaScript libraries and plugins such as FitVids (outside the scope of this commodity) tin help, even for videos from YouTube and other sources. Unfortunately, these resource can increase your network payload sizes with negative consequences for your revenues and your users' wallets.
For simple uses similar the ones I'm describing here, use CSS media queries to specify the size of elements depending on the viewport dimensions; max-width: 100% is your friend.
For media content in iframes (such as YouTube videos), endeavour a responsive arroyo (similar the one proposed by John Surdakowski).
CSS #
.video-container {
position : relative;
padding-lesser : 56.25%;
padding-elevation : 0;
height : 0;
overflow : hidden;
} .video-container iframe,
.video-container object,
.video-container embed {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
}
HTML #
<div class = "video-container" >
<iframe
src = "//www.youtube.com/embed/l-BA9Ee2XuM"
frameborder = "0"
width = "560"
superlative = "315"
> </iframe >
</div > Try it
Compare the responsive sample to the unresponsive version. Every bit you lot tin can see, the unresponsive version isn't a great user experience.
Device orientation #
Device orientation isn't an effect for desktop monitors or laptops, simply it's hugely important when considering spider web page design for mobile devices and tablets.
Safari on iPhone does a good chore of switching between portrait and mural orientation:
Device orientation on an iPad and Chrome on Android can exist problematic. For example, without any customization a video playing on an iPad in mural orientation looks similar this:
Setting the video width: 100% or max-width: 100% with CSS can resolve many device orientation layout problems.
Autoplay #
The autoplay aspect controls whether the browser downloads and plays a video immediately. The precise way it works depends on the platform and browser.
-
Chrome: Depends on multiple factors including simply non limited to whether the viewing is on desktop and whether the mobile user has added your site or app to their homescreen. For details, see Autoplay best practices.
-
Firefox: Blocks all video and sound, but gives users the ability to relax these restrictions for either all sites or detail sites. For details, see Let or cake media autoplay in Firefox
-
Safari: Has historically required a user gesture, but has been relaxing that requirement in recent versions. For details, see New <video> Policies for iOS.
Even on platforms where autoplay is possible, yous need to consider whether it's a good idea to enable it:
- Information usage can be expensive.
- Playing media before the user wants information technology can pig bandwidth and CPU, and thereby filibuster page rendering.
- Users may exist in a context where playing video or audio is intrusive.
Preload #
The preload attribute provides a hint to the browser equally to how much information or content to preload.
| Value | Description |
|---|---|
none | The user might chose not to watch the video, so don't preload anything. |
metadata | Metadata (duration, dimensions, text tracks) should be preloaded, just with minimal video. |
machine | Downloading the entire video right away is considered desirable. An empty string produces the same upshot. |
The preload attribute has different effects on different platforms. For example, Chrome buffers 25 seconds of video on desktop but none on iOS or Android. This means that on mobile, there may be playback startup delays that don't happen on desktop. Come across Fast playback with audio and video preload or Steve Souders' blog for more details.
Now that you know how to add media to your spider web page information technology's time to acquire about Media accessibility where you will add together captions to your video for hearing impaired, or when playing the audio is not a viable option.
Final updated: — Improve commodity
Render to all articles
Source: https://web.dev/video-and-source-tags/
Belum ada Komentar untuk "How to Upload a Video With a Tag"
Posting Komentar