I want to use flv format video as background playback on the login page of software developed with HTML5. I would like to ask how to achieve it. I checked a lot of posts saying that HTML5 does not support videos in flv format, but it cannot use MP4 format because the video must be placed in the local installation package and the video must not exceed...

Home > Q&A > body text

How to use HTML5 to insert flv format video on mobile phone

I want to use flv format video as background playback on the login page of software developed with HTML5. I would like to ask how to achieve it. I have checked many posts saying that HTML5 does not support videos in flv format, but it cannot use MP4 format because the video must be placed in the local installation package and the video is required to be no more than 3M. I would like to ask the experts how to solve this problem. . grateful

大家讲道理2697 days ago731

reply all(3)I'll reply

世界只因有你2017-05-31 10:42:56

No more than 3M, which can be achieved by re-decoding and then encoding mp4. Don’t consider playing flv in HTML5, it is too difficult.

漂亮男人2017-05-31 10:42:56

Let’s talk about the results first: feasible.
Preview address:
I temporarily provide a preview link on my personal site and delete it after three days

http://alonesuperman.com/show...

Using the open source flv.js of Bilibili
https://github.com/Bilibili/f...
I just modified the demo
for you to see

<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>flv.js demo2</title>

    <style>
        .mainContainer {
            display: block;
            width: 1024px;
            margin-left: auto;
            margin-right: auto;
        }

        .urlInput {
            display: block;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            margin-top: 8px;
            margin-bottom: 8px;
        }

        .centeredVideo {
            display: block;
            width: 100%;
            height: 576px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: auto;
        }

        .controls {
            display: block;
            width: 100%;
            text-align: left;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>

<body>
    
    <p class="mainContainer">
        <video id="videoElement" name="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">
            Your browser is too old which doesn't support HTML5 video.
        </video>
        <br>
        <p class="controls">
            <button onclick="flv_load()">Load</button>
            <button onclick="flv_start()">Start</button>
            <button onclick="flv_pause()">Pause</button>
            <button onclick="flv_destroy()">Destroy</button>
            <input style="width:100px" type="text" name="seekpoint"/>
            <button onclick="flv_seekto()">SeekTo</button>
        </p>
    </p>

    <script src="../dist/flv.js"></script>
    
    <script>
        function flv_load() {
            if (flvjs.isSupported()) {
                var videoElement = document.getElementById('videoElement');
                var flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    url: '1.flv'
                });
                flvPlayer.attachMediaElement(videoElement);
                flvPlayer.load();
                flvPlayer.play();
            }
            window.player=flvPlayer;
        }

        function flv_start() {
            player.play();
        }

        function flv_pause() {
            player.pause();
        }

        function flv_destroy() {
            player.pause();
            player.unload();
            player.detachMediaElement();
            player.destroy();
            player = null;
        }

        function flv_seekto() {
            var input = document.getElementsByName('seekpoint')[0];
            player.currentTime = parseFloat(input.value);
        }

        function getUrlParam(key, defaultValue) {
            var pageUrl = window.location.search.substring(1);
            var pairs = pageUrl.split('&');
            for (var i = 0; i < pairs.length; i++) {
                var keyAndValue = pairs[i].split('=');
                if (keyAndValue[0] === key) {
                    return keyAndValue[1];
                }
            }
            return defaultValue;
        }

    </script>
    
</body>

</html>

我想大声告诉你2017-05-31 10:42:56

It doesn’t exist! ! ! ! !

Cancelreply