HTML video tag - change source on viewport without media attribute

HTML video tag - change source on viewport without media attribute

I'm trying to implement a video in HTML with react. So if the viewport is under 750px width, I would like to change the video source to a smaller resolution/ smaller file (because of high data transfer and so on).

I'm trying to implement a video in HTML with react. So if the viewport is under 750px width, I would like to change the video source to a smaller resolution/ smaller file (because of high data transfer and so on).

So in a perfect HTML world, you would build this:

<video controls> 
   <source src="video-small.mp4" type="video/mp4" media="all and (max-width: 750px)"> 
   <source src="video.mp4" type="video/mp4"> 
</video>

Since media is not (or no more) specified in the source tag if it's inside of a video tag, I can't use this anymore. Because Chrome is displaying the first source, which is the mobile video. No matter if desktop or mobile.

Second solution was to wrap a container around and set display: none; to the not visible video:

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import LazyLoad from 'react-lazyload'

const MobileVideo = styled.div width: 100%; height: 100%; object-fit: cover; display: none; ${({theme}) =&gt; theme.media.mobile display: block; }

const DesktopVideo = styled.div width: 100%; height: 100%; object-fit: cover; display: block; ${({theme}) =&gt; theme.media.mobile display: none; }

const VideoComponent = ({ srcWebm, srcMp4, mobileSrcWebm, mobileSrcMp4, poster, className, forwardedRef, ...rest }) => ( <React.Fragment> <MobileVideo> <video playsInline poster={poster.url} className={className} ref={forwardedRef} {...rest} > {mobileSrcWebm.url !== '' && ( <source src={mobileSrcWebm.url} type="video/webm" /> )} {mobileSrcMp4.url !== '' && ( <source src={mobileSrcMp4.url} type="video/mp4" /> )} </video> </MobileVideo> <DesktopVideo> <video playsInline poster={poster.url} className={className} ref={forwardedRef} {...rest} > {srcWebm.url !== '' && <source src={srcWebm.url} type="video/webm" />} {srcMp4.url !== '' && <source src={srcMp4.url} type="video/mp4" />} </video> </DesktopVideo> </React.Fragment> )

In this case the correct video is displayed, but both videos are downloaded (in Chrome). Hiding doesn't prevent the browser from downloading. SAD!

Third solution was to use the second solution and remove the invisible component from the DOM:

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import LazyLoad from 'react-lazyload'

import {sizes} from '../../lib/ThemeProvider/media'

const MobileVideo = styled.div width: 100%; height: 100%; object-fit: cover; display: none; ${({ theme }) =&gt; theme.media.mobile display: block; }

const DesktopVideo = styled.div width: 100%; height: 100%; object-fit: cover; display: block; ${({ theme }) =&gt; theme.media.mobile display: none; }

class VideoComponent extends React.Component { state = { showMobileSrc: true }

componentDidMount() { this.resize() window.addEventListener('resize', this.resize) }

componentWillUnmount() { window.removeEventListener('resize', this.resize) }

resize = () => { if (window.innerWidth >= sizes.mobile) { this.setState({ showMobileSrc: false }) } else { this.setState({ showMobileSrc: true }) } }

render() { const { srcWebm, srcMp4, mobileSrcWebm, mobileSrcMp4, poster, className, forwardedRef, ...rest } = this.props const {showMobileSrc} = this.state return ( <React.Fragment> {showMobileSrc && <MobileVideo> <video playsInline poster={poster.url} className={className} ref={forwardedRef} {...rest} > {mobileSrcWebm.url !== '' && ( <source src={mobileSrcWebm.url} type="video/webm" /> )} {mobileSrcMp4.url !== '' && ( <source src={mobileSrcMp4.url} type="video/mp4" /> )} </video> </MobileVideo>} {!showMobileSrc && <DesktopVideo> <video playsInline poster={poster.url} className={className} ref={forwardedRef} {...rest} > {srcWebm.url !== '' && <source src={srcWebm.url} type="video/webm" />} {srcMp4.url !== '' && <source src={srcMp4.url} type="video/mp4" />} </video> </DesktopVideo>} </React.Fragment> ) } }

But chrome is downloading both videos anyway. HTML seems to be correct. No idea what chrome is doing there..

First i really don"t understand why they removed the media attribute from the source tag inside of a video tag. Thats not consistently implemented.

Anyway: How can I change the source at a defined viewport width and prevent downloading both videos?

html video reactjs

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Know Everything About HTML With HTML Experts

HTML Assignment Help Australia @30% OFF from Sample Assignment, with Our Best HTML assignment help experts. Get HTML homework help online at affordable price. 100% Plag free assignment solution.

Commonly Used HTML Tags with Examples

HTML tags are keywords used in HTML to display web-pages with certain properties. They are further used for defining HTML elements. An HTML element consists of a starting tag.

HTML Basics to Learn HTML for Web Development

HTML is the mark-up language most websites are written in. In this article, we will delve into the most basics of HTML like tags and elements that are of utmost importance while writing any code in HTML. These tags help in the structuring and display of content on the web pages.

Types, Effects and Attributes

Learn about HTML Button & various effects on these buttons like ripple, fade-in & pressed. Learn types of HTML buttons - shaded button, animated button etc.

HTML Checkbox - How to Create Custom Check Box in HTML

Learn about HTML Checkbox - Various types of checkbox and their attributes, How to define multiple checkboxes, use CSS and javascript for checkboxes in HTML.