flv.js播放flv视频失败

前端小黑 2019-11-17 04:55:24

使用flv.js播放视频的时候总是出错，找了网上的demo的代码很多都一样的，但是试了之后都报了下面一样的错误

代码如下



<!DOCTYPE html>

<html>

 

<head>

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">

    <title>flv.js demo</title>

    <style>

       

    </style>

</head>

 

<body>

    

    <div class="mainContainer">

        <input name="urlinput" class="urlInput" type="text" value="./video/6.flv"/>

        <video name="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">

            Your browser is too old which doesn't support HTML5 video.

        </video>

        <br>

        <div class="controls">

            <button οnclick="flv_load()">Load</button>

            <button οnclick="flv_start()">Start</button>

            <button οnclick="flv_pause()">Pause</button>

            <button οnclick="flv_destroy()">Destroy</button>

            <input style="width:100px" type="text" name="seekpoint"/>

            <button οnclick="flv_seekto()">SeekTo</button>

        </div>

    </div>

 

    <script src="./js/flv.min.js"></script>

    

    <script>

        function flv_load() {

            console.log('isSupported: ' + flvjs.isSupported());

            var urlinput = document.getElementsByName('urlinput')[0];

            var xhr = new XMLHttpRequest();

            xhr.open('GET', urlinput.value, true);

            xhr.onload = function (e) {

                var player;

                var element = document.getElementsByName('videoElement')[0];

                if (typeof player !== "undefined") {

                    if (player != null) {

                        player.unload();

                        player.detachMediaElement();

                        player.destroy();

                        player = null;

                    }

                }

              

                player = flvjs.createPlayer({

                    type: 'flv',

                    url: urlinput.value

                });

                player.attachMediaElement(element);

                player.load();

            }

            xhr.send();

        }

 

        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;

        }

 

        var urlInputBox = document.getElementsByName('urlinput')[0];

        var url = decodeURIComponent(getUrlParam('src', urlInputBox.value));

        urlInputBox.value = url;

        

        document.addEventListener('DOMContentLoaded', function () {

            flv_load();

        });

    </script>

    

</body>

 

</html>