diff --git a/projects/common/element-components/audio.component.ts b/projects/common/element-components/audio.component.ts
index d07463380c101cdd7ff18c3c60b418024f0a439f..582bdfa8e3300a657082d9c97ea486d508a67ad1 100644
--- a/projects/common/element-components/audio.component.ts
+++ b/projects/common/element-components/audio.component.ts
@@ -1,7 +1,6 @@
-import { Component, EventEmitter, Output } from '@angular/core';
-import { ElementComponent } from '../element-component.directive';
+import { Component } from '@angular/core';
 import { AudioElement } from '../models/audio-element';
-import { ValueChangeElement } from '../models/uI-element';
+import { MediaPlayerElementComponent } from '../media-player-element-component.directive';
 
 @Component({
   selector: 'app-audio',
@@ -19,7 +18,6 @@ import { ValueChangeElement } from '../models/uI-element';
     </div>
   `
 })
-export class AudioComponent extends ElementComponent {
-  @Output() playbackTimeChanged = new EventEmitter<ValueChangeElement>();
+export class AudioComponent extends MediaPlayerElementComponent {
   elementModel!: AudioElement;
 }
diff --git a/projects/common/element-components/video.component.ts b/projects/common/element-components/video.component.ts
index 0398d550ae9de3d340cea18b8f18345408748374..add8712dc6a7c2a3307d80f342cdbe52d9f6295b 100644
--- a/projects/common/element-components/video.component.ts
+++ b/projects/common/element-components/video.component.ts
@@ -1,7 +1,6 @@
-import { Component, EventEmitter, Output } from '@angular/core';
-import { ElementComponent } from '../element-component.directive';
+import { Component } from '@angular/core';
 import { VideoElement } from '../models/video-element';
-import { ValueChangeElement } from '../models/uI-element';
+import { MediaPlayerElementComponent } from '../media-player-element-component.directive';
 
 @Component({
   selector: 'app-video',
@@ -22,7 +21,6 @@ import { ValueChangeElement } from '../models/uI-element';
   `,
   styles: ['.correct-position{ display: block; margin-top: -4px; }']
 })
-export class VideoComponent extends ElementComponent {
-  @Output() playbackTimeChanged = new EventEmitter<ValueChangeElement>();
+export class VideoComponent extends MediaPlayerElementComponent {
   elementModel!: VideoElement;
 }
diff --git a/projects/common/media-player-element-component.directive.ts b/projects/common/media-player-element-component.directive.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fd1875481f515b93b5486250be81d14ee9bf643c
--- /dev/null
+++ b/projects/common/media-player-element-component.directive.ts
@@ -0,0 +1,8 @@
+import { Directive, EventEmitter, Output } from '@angular/core';
+import { ValueChangeElement } from './models/uI-element';
+import { ElementComponent } from './element-component.directive';
+
+@Directive()
+export abstract class MediaPlayerElementComponent extends ElementComponent {
+  @Output() playbackTimeChanged = new EventEmitter<ValueChangeElement>();
+}