Ich möchte Videos im FLV-Format als Hintergrundwiedergabe auf der Anmeldeseite einer mit HTML5 entwickelten Software verwenden. Ich würde gerne fragen, wie ich das erreichen kann. Ich habe viele Beiträge überprüft und alle sagten, dass HTML5 keine Videos im FLV-Format unterstützt, aber das MP4-Format nicht verwenden kann, da das Video im lokalen Installationspaket platziert werden muss und das Video nicht größer als ... sein darf.

So verwenden Sie HTML5, um Videos im FLV-Format auf einem Mobiltelefon einzufügen

Ich möchte Videos im FLV-Format als Hintergrundwiedergabe auf der Anmeldeseite einer mit HTML5 entwickelten Software verwenden. Ich würde gerne fragen, wie ich das erreichen kann. Ich habe viele Beiträge überprüft, die besagten, dass HTML5 keine Videos im FLV-Format unterstützt, aber das MP4-Format nicht verwenden kann, da das Video im lokalen Installationspaket abgelegt werden muss und das Video nicht größer als 3M sein darf Die Experten, wie man dieses Problem löst. Danke

大家讲道理2697 Tage vor727

Antworte allen(3)Ich werde antworten

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

不超过 3M ，可以通过重新解码再编码 mp4 来实现，HTML5 播放 flv 就不要考虑了，难度太大。

Antwort

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

先说结果：可行。
预览地址：
我临时在个人站点上提供一个预览链接，三天后删除

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

用到了b站开源的flv.js
https://github.com/Bilibili/f...
刚才自己改了下demo
给你看看

<!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>

Antwort

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

不存在的！！！！！

Antwort

StornierenAntwort