Question

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

我为此写了一个模板文件和coffescript部分：

<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 = {}删除所有玩家绑定也不起作用。

Answer 1

我已经解决了我的问题。 Trick不会在模板上应用这种样式。

我通过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"

Answer 2

尝试添加此代码，

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

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

VideoJS，流星和模板的重新渲染

2 个答案: