当前位置： 文江博客话题详情

HTML5 视频 - 文件加载完成事件？

发布于 2024-10-20 01:34:16 字数 175 浏览 3 评论 0原文

我需要检测视频文件何时完成加载。我想我应该使用进度->缓冲区，但在我的脑海里，我记得读到这是不可靠的。有没有更好的方法，或者这样安全吗？

请注意，我将保留每个用户已完全下载的视频的本地存储缓存，因此我会提前知道视频是否已加载，并且如果这是一个症结所在，则可能会绕过进度->缓冲区。

提前致谢。

原文

I need to detect when a video file has completed loading. I'm thinking I should use progress->buffer, but in the back of my mind, I remember reading that this was unreliable. Is there a better way, or is this safe?

Note, I will be keeping a localStorage cache of videos that have been completely downloaded by each user, so I'll know in advance if a video has already loaded, and could probably bypass progress->buffer if that's a sticking point.

Thanks in advance.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

人事已非 2024-10-27 01:34:16

您可以绑定“缓冲”事件，但是（至少在 Chrome 中）这工作正常，只是它不会调用最后一个“缓冲”事件（即它将检测 90%...94%...98%。 ..但不会100%打电话）。

注意：最新版本的 jQuery 应该使用 .prop() 而不是 .attr()

为了解决这个问题，我使用 setInterval() 每 500 毫秒检查一次缓冲区（其中 $html5Video 是您的 元素：

var videoDuration = $html5Video.attr('duration');

var updateProgressBar = function(){
    if ($html5Video.attr('readyState')) {
        var buffered = $html5Video.attr("buffered").end(0);
        var percent = 100 * buffered / videoDuration;

        //Your code here

        //If finished buffering buffering quit calling it
        if (buffered >= videoDuration) {
                clearInterval(this.watchBuffer);
        }
    }
};
var watchBuffer = setInterval(updateProgressBar, 500);

You can bind the "buffered" event, but (in Chrome at least) this works fine except that it doesn't call the last "buffered" event (i.e. it will detect 90%...94%...98%... but won't call on 100%).

Note: recent versions of jQuery should use .prop() instead of .attr()

To get around this I've used setInterval() to check the buffer every 500ms (where $html5Video is your <video> element:

var videoDuration = $html5Video.attr('duration');

var updateProgressBar = function(){
    if ($html5Video.attr('readyState')) {
        var buffered = $html5Video.attr("buffered").end(0);
        var percent = 100 * buffered / videoDuration;

        //Your code here

        //If finished buffering buffering quit calling it
        if (buffered >= videoDuration) {
                clearInterval(this.watchBuffer);
        }
    }
};
var watchBuffer = setInterval(updateProgressBar, 500);
回复 原文
不必了 2024-10-27 01:34:16

我遇到了同样的问题，并使用附加到进度事件的计时器。这是一个黑客，但我还没有看到任何其他方法可以做到这一点。 （我已经在 Chome 10 - Windows 上对此进行了测试）。

var video = document.getElementById('#example-video-element');
var timer = 0;
video.addEventListener('progress', function (e) {
    if (this.buffered.length > 0) {

        if (timer != 0) {
            clearTimeout(timer);
        }

        timer = setTimeout(function () {            
            if(parseInt(video.buffered.end() / video.duration * 100) == 100) {
                // video has loaded.... 
            };          
        }, 1500);

    }
}, false);

这看起来像是您正在考虑采取的方法类型，但我想我会为那些可能正在寻找快速代码示例的匿名用户发布一个示例 =p
国杰

I've had the same problem and use a timer attached to the progress event. It's a hack but I haven't seen any other ways of doing this. (I've tested this on Chome 10 - Windows).

var video = document.getElementById('#example-video-element');
var timer = 0;
video.addEventListener('progress', function (e) {
    if (this.buffered.length > 0) {

        if (timer != 0) {
            clearTimeout(timer);
        }

        timer = setTimeout(function () {            
            if(parseInt(video.buffered.end() / video.duration * 100) == 100) {
                // video has loaded.... 
            };          
        }, 1500);

    }
}, false);

This looks like the type of approach you were thinking of taking, but figured I would post an example for those anonymous users who might be looking for a quick code sample =p
GJ

回复 原文
尹雨沫 2024-10-27 01:34:16

这是使用 Google 的 MDC 的充实实现-Web 的 mdc-linear-progress UI 组件。

var doc = document;
var bufferLengthDetector;
var linearProgress;
var mdc = window.mdc;
mdc.autoInit();
var video = doc.querySelector('video');

if(doc.getElementById("footer-progress")){
    linearProgress = mdc.linearProgress.MDCLinearProgress.attachTo(doc.getElementById("footer-progress"));
}

if(video){
    
    video.addEventListener('timeupdate', function() {
        var percent = Math.floor((100 / video.duration) * video.currentTime);
        linearProgress.progress = percent/100;
    }, false);
    
    video.addEventListener('progress', function() {
        var duration = video.duration;
        if (duration > 0) {
            bufferLengthDetector = setInterval(readBuffer, 500);
        }
    });
}

function readBuffer(){
    var percent = video.buffered.end(video.buffered.length - 1) / video.duration;
    if (percent >= .9) {
        linearProgress.buffer = 1;
        clearInterval(bufferLengthDetector);
    }
    else {
        linearProgress.buffer = percent;
    }
}
html {
    height:100%;
}
body{
    margin: 0;
}

#footer-progress{
    position: fixed;
    bottom: 0;
    width: 100%;
    visibility: visible;
    opacity: 1;    
}

video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background: #212121;
    background-size: cover;
    transition: visibility 1s, opacity 1s linear;
    visibility: visible;
    opacity: 1;
}
<head>
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>

<body>

    <video class="bg-video" playsinline autoplay>
        <source src="//rack.pub/media/do-not.webm" type="video/webm">
        <source src="//rack.pub/media/do-not.mp4" type="video/mp4">            
        I'm sorry your browser doesn't support HTML5 video in WebM with VP8/VP9 or MP4 with H.264.
    </video>
    
    <div role="progressbar" class="mdc-linear-progress" data-buffer="true" id="footer-progress">
        <div class="mdc-linear-progress__buffering-dots"></div>
        <div class="mdc-linear-progress__buffer"></div>
        <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
            <span class="mdc-linear-progress__bar-inner"></span>
        </div>
        <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
            <span class="mdc-linear-progress__bar-inner"></span>
        </div>
    </div>  

</body>

Here's a fleshed out implementation with Google's MDC-Web's mdc-linear-progress UI component.

var doc = document;
var bufferLengthDetector;
var linearProgress;
var mdc = window.mdc;
mdc.autoInit();
var video = doc.querySelector('video');

if(doc.getElementById("footer-progress")){
    linearProgress = mdc.linearProgress.MDCLinearProgress.attachTo(doc.getElementById("footer-progress"));
}

if(video){
    
    video.addEventListener('timeupdate', function() {
        var percent = Math.floor((100 / video.duration) * video.currentTime);
        linearProgress.progress = percent/100;
    }, false);
    
    video.addEventListener('progress', function() {
        var duration = video.duration;
        if (duration > 0) {
            bufferLengthDetector = setInterval(readBuffer, 500);
        }
    });
}

function readBuffer(){
    var percent = video.buffered.end(video.buffered.length - 1) / video.duration;
    if (percent >= .9) {
        linearProgress.buffer = 1;
        clearInterval(bufferLengthDetector);
    }
    else {
        linearProgress.buffer = percent;
    }
}
html {
    height:100%;
}
body{
    margin: 0;
}

#footer-progress{
    position: fixed;
    bottom: 0;
    width: 100%;
    visibility: visible;
    opacity: 1;    
}

video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background: #212121;
    background-size: cover;
    transition: visibility 1s, opacity 1s linear;
    visibility: visible;
    opacity: 1;
}
<head>
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>

<body>

    <video class="bg-video" playsinline autoplay>
        <source src="//rack.pub/media/do-not.webm" type="video/webm">
        <source src="//rack.pub/media/do-not.mp4" type="video/mp4">            
        I'm sorry your browser doesn't support HTML5 video in WebM with VP8/VP9 or MP4 with H.264.
    </video>
    
    <div role="progressbar" class="mdc-linear-progress" data-buffer="true" id="footer-progress">
        <div class="mdc-linear-progress__buffering-dots"></div>
        <div class="mdc-linear-progress__buffer"></div>
        <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
            <span class="mdc-linear-progress__bar-inner"></span>
        </div>
        <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
            <span class="mdc-linear-progress__bar-inner"></span>
        </div>
    </div>  

</body>

回复 原文
~没有更多了~

关于作者

空气里的味道

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

lorenzathorton8

文章 0 评论 0

Zero

文章 0 评论 0

萧瑟寒风

文章 0 评论 0

mylayout

文章 0 评论 0

tkewei

文章 0 评论 0

17818769742

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文