使用Videojs

时间:2018-06-08 00:15:57

标签: angularjs video.js

我正在尝试使用VideoJS和AngularJS为我的视频播放器实现修剪功能。我希望用户能够滑动到他们想要的位置并点击按钮来保存设置。但是,我无法通过使用videojs隐藏/添加新的进度条。我不确定我是否能够通过使用videojs进行此类自定义。

这就是我所拥有的:

    directive('videojs', function () {
  var linker = function (scope, element, attrs) {
          attrs.type = attrs.type || "video/mp4";
          scope.clicked = true;
          var setup = {
              'techOrder' : ['html5'],
              'controls' : true,
              'preload' : 'auto',
              'autoplay' : false,
              'fluid' : true
          };

          var Button = videojs.getComponent('Button');
          var MyButton = videojs.extend(Button, {
            constructor: function() {
              Button.apply(this, arguments);
              /* initialize your button */
              this.addClass('testBB');
              this.controlText("Previous");
            },
            handleClick: function() {
              /* do something on click */
              scope.clicked = !scope.clicked;
              console.log('click');
            }
          });
          videojs.registerComponent('MyButton', MyButton);

          attrs.id = "videojs";
          element.attr('id', attrs.id);
          element.attr('poster', "input-image-url");
          var player = videojs(attrs.id, setup, function(){
              var source = {
                type: "video/mp4",
                src: "input-video-url"
              }
              this.src({type : source.type, src: source.src });
          });
          player.getChild('controlBar').addChild('myButton', {});
          scope.$on('$destroy', function () {
            player.dispose();
        });
      }
  return {
      restrict : 'A',
      link : linker
  };
});

谢谢

1 个答案:

答案 0 :(得分:0)

整理功能可以使用videojs实现。我已经为MTV项目之一实现了它。不过我使用了另一种方法,

  

我使用了外部多重滑块(任意)控件,并将其范围设置为视频中的总帧数。

     

然后,用户可以设置剪辑的开始帧和结束帧,然后使用“创建”按钮,我就能够获得修剪剪辑的开始和结束点。

这不是您正在寻找的完美解决方案,但是您可以尝试这种方法。