VideoJS、Meteor 和模板的重新渲染答案

【问题标题】：VideoJS, Meteor and rerendering of templatesVideoJS、Meteor 和模板的重新渲染
【发布时间】：2014-01-28 22:40:44
【问题描述】：

在一个项目中，我们使用 Meteor 应用程序中的 VideoJS 播放器来播放一些视频。我们有一个播放列表来浏览视频。问题是，当模板重新渲染时，播放器无法在此之后再次初始化。

我为此编写了一个模板文件和咖啡脚本部分：

<template name="videoPlayer">
<video id="videoJsPlayer" class="video-js vjs-default-skin"
    controls preload="auto" width="572" height="350"
    poster="...file.jpg"
    >
    <source src="...video.mp4" type='video/mp4' />
</video>
</template>

我已经尝试过使用该 ID，但是当我回到同一个视频时，ID 将是相同的。和咖啡脚本：

Template.videoPlayer.rendered = ->
    videojs.options.flash.swf = "/video-js.swf"

    $vid_obj = _V_ "videoJsPlayer", {}, ()->
        console.log "Player Loaded"

    $vid_obj.ready () ->
        console.log("Element ready");

我之前也尝试过将“vid_obj”放在全局某个地方并调用 videojs 的“destroy()”方法。这给出了一个错误，destroy() 不存在。删除所有播放器绑定的 V.players = {} 也不起作用。

【问题讨论】：

标签： meteor video.js

【解决方案1】：

我已经解决了我的问题。诀窍是不要在模板上应用那种样式。

我通过 jQuery 添加了视频播放器：

if videojs.players.videoJsPlayer
    videojs.players.videoJsPlayer.dispose()

$v = $(".videoPlayerFrame")

$v.html("").append $("<video id=\"videoJsPlayer\" class=\"video-js vjs-default-skin \">")
    .attr("controls", true) 
    .attr("preload", "none")
    .attr("width", $v.attr("data-width"))
    .attr("height", $v.attr("data-height"))
    .attr("poster", $v.attr("data-poster"))
    .append("<source src=\""+$v.attr("data-video")+"\" type=\"video/mp4\" />")


$vid_obj = _V_ "videoJsPlayer", {}, ()->
    # console.log "video #{vid} is ready.";
    console.log "Element Loaded"

【讨论】：

【解决方案2】：

尝试添加此代码，

Template.videoPlayer.destroyed = function () {
    var mPlayer = vidoejs("#playerId");
    mPlayer.dispose();
}

每次 Meteor 渲染播放器模板时，它都会被销毁和创建。我希望这不会发生在新的 Meteor 渲染器 Shark 中。

【讨论】：

它不工作。没有错误，只是不工作。还尝试在初始化之前添加该代码，但这会删除标签。