Question

我有运行video.js播放器的问题。

首先我将video.js和video-js.css放在client/compatibility文件夹中，以便首先加载

然后在我的客户端html我写下面的简单代码，它不能正常工作

          <video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
                  controls  width="640" height="264"
                  poster="{{video.thumbs}}"
                  data-setup='{"controls": true, "autoplay": true,"techOrder":["flash", "html5"],preload="auto"}'>
                 <source  type='video/flv' src="{{uurl}}" />
            </video>

模板助手没有问题，但他们的工作正常但是

问题在于video.js播放器，它没有加载。

以前有人试过吗？在这里，任何帮助赞赏

更新

动态加载解决方案对我来说很好但是当我点击视频时，它会重定向到 / video /：_ id /：_ slug 页面并订阅单个视频，但当我回到主页并再次点击另一个视频时，这次是视频播放器没有再次初始化

代码

点击视频时：

'click .videothumb > a':function(e,t){
        Session.set("url",e.currentTarget.getAttribute("data-url"));
        var url=e.currentTarget.getAttribute("data-url");
        var title=e.currentTarget.getAttribute("data-title");
        var cid=e.currentTarget.getAttribute("data-id");
        Meteor.call("videoData",url,function(er,da){
            console.log(cid);
            Session.set('vurl',da);
            Router.go("video",{_id:cid,slug:title});
        });
    }

路由

this.route("video",{
          path:'/video/:_id/:slug',
           waitOn: function() {
            // return Meteor.subscribe('singleVideo', this.params._id);
          },
          onBeforeAction: function () {

          },
          data:function(){
                Session.set("currentVideoId",this.params._id);
                var video;
                video= Videos.findOne({_id: this.params._id});
                return {
                  video:video
                };
          }
    });

渲染功能：

Template.video.rendered=function(){
        var id=Session.get("currentVideoId");
        Meteor.call("incViews",id,function(e,d){
            console.log("view added");
        });
        videojs("videoId",{"controls": true, "autoplay": false,"techOrder":["html5","flash"],preload:"auto"},function(){ 
          // Player (this) is initialized and ready. 
          **console.log("videojs initialized");**
          console.log(this)   ;
        } 
      );
};

控制台“videojs initialized”仅在我路由视频页面时首次登录

从下一个路由（当我点击主页上的视频缩略图时）日志功能不是loggind（表示播放器没有初始化）

任何使其更好用的建议

Answer 1

在初始化videojs脚本时，没有渲染模板，你需要手动初始化videojs播放器。

<强> tpl1.html ：

<template name="tpl1">
  <video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
              controls  width="640" height="264"
              poster="{{video.thumbs}}">
     <source  type='video/flv' src="{{uurl}}" />
  </video>
</template>

<强> tpl1.js ：

Template.tpl1.rendered = function(){
  videojs(
    "example_video_1",
    {"controls": true, "autoplay": true,"techOrder":["flash", "html5"],preload="auto"},
    function(){           // Player (this) is initialized and ready.        } 
  );
})

请阅读Video.js的文档： "Alternative Setup for Dynamically Loaded HTML"

Answer 2

我在我的项目中使用Blaze实现了它，但是使用了较低级别的Tracker依赖项。渲染模板时，我会动态启动播放器，然后有一个我可以控制的当前位置的反应数据源：https://github.com/Slava/talk-player/blob/master/client/player.js

Answer 3

这对Meteor 1.6.1.1很有用。

模板html

<template name="tebVideo">
  <video class="video-js">
    <source src="{{src}}" type="video/mp4">
  </video>
</template>

模板js

import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';
import 'video.js/dist/video-js.css';
import videojs from 'video.js';
import './video.html';

// prevent analytics
window.HELP_IMPROVE_VIDEOJS = false;

// helper for local dev vs product cdn 
const envUrl = (localPath, fileName) => {
  if (Meteor.isProduction) {
    return Meteor.settings.public.host.cdnUrl+'/'+fileName;
  }
  else {
    return localPath+fileName;
  }
};

Template.tebVideo.onRendered(() => {
  const instance = Template.instance();
  const video = videojs(document.querySelector('.video-js'),
    {
      controls: true,
      autoplay: false,
      preload: 'auto',
      width: 854,
      height: 480,
      aspectRatio: "16:9",
      poster: envUrl('/images/', instance.data.poster),
      function() {
        Log.log(['debug', 'video'], 'Video loaded ok');
      }
    }
  );
});

Template.tebVideo.helpers({
  src() {
    const instance = Template.instance();
    return envUrl('/videos/', instance.data.src);
  }
});

显示它

{{>tebVideo poster="three_robots.png" src="how-knowledge-automation-works.mp4"}}

Meteor和Video.js播放器加载问题

3 个答案: