11

火狐提示 安全错误：位于 http://localhost/ 的内容不可以载入来自 blob:http的数据...

 3 years ago
source link: https://www.oschina.net/question/3038423_2322428
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

火狐提示 安全错误：位于 http://localhost/ 的内容不可以载入来自 blob:http的数据内容

vbn19456 发布于 前天 18:25

这是一个网上找的mse的H5播放例子，点击发送mse不知道为什么总报错 提示安全错误 不能载入blob的数据

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">

    function MediaSources()
    {
        var videoMp4 = document.querySelector('.js-player-mp4');
        if (window.MediaSource) {
            // 创建MediaSource对象，并使用URL.createObjectURL来创建指向MediaSource对象的URL供video播放
            let mediaSource = new MediaSource();
            //video.src 通过 URL.createObjectURL 链接 mediaSource
            videoMp4.src = URL.createObjectURL(mediaSource);
            //监听sourceopen
            mediaSource.addEventListener('sourceopen', sourceOpen);
        } else {
            console.log("您的浏览器不支持 Media Source");
            return;
        }
        //异步处理
        function sourceOpen(e) {
            URL.revokeObjectURL(videoMp4.src);
            // 设置 媒体的编码类型
            //var mime = 'video/webm; codecs="vorbis, vp8"';
            var mime = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'//video/webm、audio/mpeg、audio/mp4 
            var mediaSource = e.target;
            //创建一个新的 SourceBuffer 对象，然后会将它追加到 MediaSource 的 SourceBuffers 列表中。
            var sourceBuffer = mediaSource.addSourceBuffer(mime);           
            var videoUrl = videoMp4.src;
 
            //监听 SourceBuffer 上的 updateend 事件，确定空闲后，再加入新的 chunk
            fetchAB(videoUrl, function (buf) {
                sourceBuffer.addEventListener('updateend', function (_) {
                    //在数据请求完成后,调用 endOfStream()。改变 MediaSource.readyState 为 ended 并且触发 sourceended 事件。
                    mediaSource.endOfStream();// 结束当前的接受
                    videoMp4.play(); //可以播放当前获得的流
                    console.log(mediaSource.readyState); // ended
                });
                console.log("buf", buf);
                sourceBuffer.appendBuffer(buf);  //请求资源
            });          
            
        }
      
        function fetchAB(url, cb) {
            console.log(url);
            var xhr = new XMLHttpRequest;
            xhr.open('get', url);
            xhr.responseType = 'blob';
            xhr.onload = function () {
                cb(xhr.response);
            };
            xhr.send();
        };
    }
    </script>
</head>
 
 
<body>
       <input type="button" value="发送MSE" onclick="MediaSources()" />
      
     <div style="width:100%;margin-top:20px;">
         <!--<img id ="receiver" style="width:100%;height:900px;" />-->
         <video class="js-player-mp4" autoplay="autoplay" controls="controls" style="width:400px;height :400px; border:3px solid blue;" src="Video/movie.mp4">
             <!--    <source src="Video/movie.mp4" type="video/mp4">-->
         </video>         
</div>
</body>
</html>

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK