Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
So verwenden Sie HTML5, um Videos im FLV-Format auf einem Mobiltelefon einzufügen
大家讲道理
大家讲道理 2017-05-31 10:40:56
0
3
756

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

大家讲道理
大家讲道理

光阴似箭催人老，日月如移越少年。

Antworte allen(3)
世界只因有你
世界只因有你2017-05-31 10:42:56 3 Etage

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

Wie +0
Antwort hinzufügen
漂亮男人
漂亮男人2017-05-31 10:42:56 2 Etage

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

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>

Wie +0
Antwort hinzufügen
我想大声告诉你
我想大声告诉你2017-05-31 10:42:56 1 Etage

不存在的！！！！！

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage