我如何检查“canplaythrough”是否为真？

Question

如果有人单击播放按钮，我想显示一个指示器。如果视频已加载，我想隐藏预加载器。这与就绪状态完美配合：

            var einleitung = document.getElementById('einleitung');

            video.addEventListener('play', function () {

            if ( video.readyState === 4 ) {

                myApp.hidePreloader();

            } else {

                myApp.showPreloader('Loading...');

            }

            });

我怎样才能用canplaythrough而不是readyState来完成这个任务？

这样的东西不起作用：

           if ( video.canplaythrough == true ) {}

video.canplaythrough 为“空”。

Answer 1

canplaythrough

是

event

of not

audio/video

元素的属性。

此事件在

audio/video

元素的生命周期中仅在完全

buffered

时触发一次，并且可以在没有任何

buggering

/

stop

的情况下播放，除非元素的

src

未更改。

应该是这样的：

audio|video.addEventListener("canplaythrough", function(){//your code});

Answer 2

我只是想添加一个 React 的具体案例。

我使用某人的代码来处理用户只能为测试工具播放一次音频的情况。因此，为了获得最佳的用户体验，我们应该首先等待音频完全加载，以便用户可以不间断地听到音频。

但是，

canplaythrough

或

onCanPlayThrough

事件并不总是提供正确的值。我认为某些父组件的状态存在问题，导致子组件过早重新渲染。

解决这个问题的方法是，我创建一个日志数组，按顺序显示事件，并将事件侦听器添加到 MDN 中列出的所有侦听器（也是我的 VS Code 建议中的侦听器），这样我就可以查看整个过程，然后进行定制我想要的应用程序。

因此，如果您来自 React 并且发现了这个，希望它对您的调试过程有所帮助。