Videojs 自定义 Web 组件，带有角度的 ViewEncapsulation shadowDom

问题描述

我使用 videojs 创建了一个视频播放器的自定义 Web 组件。如果我将 ViewEncapsulation 保持为 Emulated，则 padding:0 工作正常，视频播放器显示正常，高度和宽度可以动态更改。但是当我将 viewEncapsulation 保持为 shadowDom 时，视频播放器 Padding:0 使它粘在顶部并且她的播放器不会出现。

import { Component,ElementRef,Input,OnDestroy,OnInit,ViewChild,AfterViewInit,ViewEncapsulation,OnChanges,SimpleChanges } from '@angular/core';
import videojs from "video.js"
import { IOptions } from './IOptions';

@Component({
  selector: 'app-video-player',templateUrl: './my-video-player.component.html',styleUrls: ['./my-video-player.component.scss'],encapsulation:ViewEncapsulation.ShadowDom
})
export class MyVideoPlayerComponent implements OnInit,AfterViewInit {
  @ViewChild('target') target;
  // see options: https://github.com/videojs/video.js/blob/mastertutorial-options.html
  @Input('myOptions') Options: IOptions;
  player: videojs.Player;
  
 
  constructor(
    private elementRef: ElementRef,) { }

  
  ngAfterViewInit(): void {
       // instantiate Video.js
  this.videoPlayer(this.Options);
  }


  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes.Options);
  }

  

ngOnInit() {
//  this.addingComponents();
  }
  

  ngOnDestroy() { 
    // destroy player
    if (this.player) {
      this.player.dispose();
    }
  }

  // addingComponents(){
  //   this.player=videojs(this.elementRef.nativeElement);
  //   videojs.getComponent();
  //   const skipBehindButton = this.player.controlBar.addChild("button");
  //   var skipBehindButtonDom = skipBehindButton.el();
  //   skipBehindButtonDom.innerHTML = "30<<";
  //   skipBehindButton.addClass("buttonClass");

  //   var skipAheadButton = this.player.controlBar.addChild("button");
  //   var skipAheadButtonDom = skipAheadButton.el();
  //   skipAheadButtonDom.innerHTML = ">>30";
  //   skipAheadButton.addClass("buttonClass");
  // }

  videoPlayer(myOptions){

    // console.log(this.Options)
    let myobj=JSON.stringify(myOptions);
    let NewSource=JSON.parse(myobj);
    console.log("NewSource",NewSource)
    let FinalSource=JSON.parse(NewSource);
    console.log("FINAL SOURCE",FinalSource)
    console.log(this.target.nativeElement);

    
    this.player = videojs(this.target.nativeElement,FinalSource,onPlayerReady); 
    

    
    function onPlayerReady() {
      console.log('onPlayerReady',this);
      this.on('pause',()=>{
        console.log("video is paused")
      })

      this.on('ended',function(){
        videojs.log('over so soon?');
        
      })


      this.on('ready',function(){
        setTimeout(()=>{
          this.height();
          this.play();
          this.playbackRate(2);
          console.log("boom")
        },3000)
      })


      this.on('pause',function(){
        let remaing=this.remainingTime();
        remaing=Math.round(remaing);
        console.log(remaing);
      })

      this.on('seeking',function(){
        let remaing=this.remainingTime();
        remaing=Math.round(remaing);
        console.log(remaing);
      })
    }
  }
}

这是图片。

enter image description here

正如您在图片中看到的，填充为 0 时，播放器会粘在顶部，我无法更改高度和宽度。这里有什么问题？

模拟工作正常，但我的要求是 ShadowDom。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）