javascript VideoJS - 无法销毁和初始化

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14812319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 22:38:34  来源:igfitidea点击:

VideoJS - unable to destroy and initialize

javascriptjqueryhtmlvideovideo.js

提问by Atadj

On VideoJS websiteyou state that support was moved to StackOverflow, so let's try it here. I've got the following code:

VideoJS 网站上,您声明支持已移至 StackOverflow,所以让我们在这里尝试一下。我有以下代码:

var player = _V_('the_id', {}, function(){
    jQuery('.remove').on('click.destroyvideojs', function(){
        player.destroy();
        jQuery(this).unbind('click.destroyvideojs');
    });
});

It initializes video at first and it destroys it.

它首先初始化视频并销毁它。

But when I want to initialize it again using the same exact piece of code, it doesn't work. It doesn't initialize the script on the same element ID (when it was removed from DOM and added again with correct initialization call after it's been added). I'm wondering why this might be happening?

但是当我想使用完全相同的代码再次初始化它时,它不起作用。它不会在相同的元素 ID 上初始化脚本(当它从 DOM 中删除并在添加后使用正确的初始化调用再次添加时)。我想知道为什么会发生这种情况?

Another try today:

今天再试试:

var the_id = 'my_id';
var player = _V_(the_id, {}, function(){        
    player.destroy();
    _V_(the_id, {}, function(){
        alert('reinit');
    });
});

So, re-initialization of VideoJS simply doesn't work. Furthermore, it removed controls from the video now.

因此,重新初始化 VideoJS 根本行不通。此外,它现在从视频中删除了控件。

回答by manafire

In case this helps anyone, it looks like it's disposein Version 4:

如果这对任何人有帮助,它看起来像是dispose在第 4 版中:

var player = videojs('my-video');
player.dispose();

回答by Mwayi

Having looked at the source for Video.js 5.0.0. @l:17236 You can just do the following:

查看了 Video.js 5.0.0 的源代码。@l:17236 您只需执行以下操作:

if(videojs.getPlayers()[id]) {
    delete videojs.getPlayers()[id];
}

回答by Gabo Esquivel

It seems that playerhasn't been defined when the callback executes. Take a look at this js fiddle http://jsfiddle.net/gaboesquivel/BA8Pm/

似乎player在回调执行时尚未定义。看看这个 js fiddle http://jsfiddle.net/gaboesquivel/BA8Pm/

destroy();works for me. this how the function looks like

destroy();对我来说有效。这是函数的样子

destroy: function () {
            this.stopTrackingProgress();
            this.stopTrackingCurrentTime();
            _V_.players[this.id] = null;
            delete _V_.players[this.id];
            this.tech.destroy();
            this.el.parentNode.removeChild(this.el)
        }

check this solution too http://help.videojs.com/discussions/problems/861-how-to-destroy-a-video-js-object#comment_13544514

也检查这个解决方案 http://help.videojs.com/discussions/problems/861-how-to-destroy-a-video-js-object#comment_13544514

回答by Vadim Costin

I pulled some of My hare from My head, very hard to find response fore such questions... So here is My solution, with JQuery... the solution was born from the question how to destroy uninitialised player objects, you guys save my day in the end, cos We can destroy only players that are shown, and even if I clean the HTML and reinitialise dynamically playerJs the flash fall back will not work for unshowed undestroyed media-player. so here is the solution:

我从我的脑袋里拿出了一些我的野兔,很难找到对这些问题的回应......所以这是我的解决方案,使用 JQuery......解决方案源于如何销毁未初始化的玩家对象的问题,你们拯救我的最后一天,因为我们只能销毁显示的播放器,即使我清理 HTML 并动态重新初始化 playerJs,闪存回退对未显示的未销毁媒体播放器也不起作用。所以这里是解决方案:

$.each(_V_.players, function (key, player) { 
    if (player.isReady) { player.destroy(); } 
    else { delete _V_.players[player.id]; } 
}); 

a little messy but will do just fine. cheers!

有点乱,但会很好。干杯!

回答by Jamin Quimby

The api reference your looking for is .dispose(); however it does not remove settings from the dom. If you have third party plugins other items may litter your DOM after the dispose is run. To run dispose and clean up your dom use a code like this

您要查找的 api 参考是 .dispose(); 但是它不会从 dom 中删除设置。如果你有第三方插件,其他项目可能会在 dispose 运行后乱扔你的 DOM。运行 dispose 和清理你的 dom 使用这样的代码

`dispose = function() {
if (settings.debug) {
    console.info('place.videojs_element.dispose()');
} /*Target the Player Element*/
var player = videojs(settings.element.id + '_player'); /*Pause Video*/
player.pause(); /*Wait for third party scripts to stop listening!!! <-- Important*/
setTimeout(function() { /*Dispose of the player*/
    player.dispose();
    /*I have a new video element waiting to be placed ( this code is proprietary )*/
    var epi = new EPI();
    epi.place.videojs_element(settings, data); /*Wait time 600ms*/
}, 600); /*Destroy the old video element <--- Important */
$('#' + settings.element.id).empty();

}`

}`

See a working example in action: http://codepen.io/JaminQuimby/pen/yNaOwz/

查看实际工作示例:http: //codepen.io/JaminQuimby/pen/yNaOwz/

The above will give you a clean DOM and completely remove the video player.

以上将为您提供一个干净的 DOM 并完全删除视频播放器。