Streaming videos from S3 takes up whole page window

help
1

I’m using Meteor-files to save and stream music and videos from an Amazon S3 bucket. It works great on desktop and mobile.

Presently, when I click on a link to play a file, the file loads and takes up the whole window.

But on mobile I would like to be able to have the video play in a smaller window similar to how youtube videos play in the youtube app.

Currently I use an iframe to display the media

const Home = (props) => {

    const { showMenu } = props
    let iFrame = React.createRef();

    loadMedia = (id) => {
        const f = uploadedFiles.findOne({_id: id}).link()
        iFrame.current.src = f
    }

    return (
        <Page renderToolbar={Navbar('Home', showMenu)}>
            <iframe ref={iFrame} id="iPlayer" src="" height="200" width="100%"></iframe>
            <FilesHome loadMedia={loadMedia}/>
        </Page>
    )
}

export default Home;

But the media takes time to show up on the iframe.

Is there a better way I could do what I want?

2

You should definitely consider just using a <video> element, especially if mobile devices are a target. Nobody at Apple or Google sweat themselves over fixing the iframe experience on mobile, they’d rather you just not use them, even if you do. It’s not really about what is or is not recommended or documented.

To reduce download time, if they’re small videos, you can use a CDN, which in many people’s experience is sufficiently faster than S3 alone. S3 isn’t really about serving things quickly. A natural choice is CloudFront.

If you want true instant startup on a mobile-friendly video tag, you’d use AWS Elemental MediaConvert to convert the videos to an instant-start format like HLS and something like GitHub - video-dev/hls.js: HLS.js is a JavaScript library that plays HLS in browsers with support for MSE. to play them.

As you can see, people report issues in “random beta version of Chrome for Android.” Supporting Android browsers horribleness has persisted for the entire decade the platform has existed, so you may consider paying for a licensed multiplatform in-browser video player.