Verwalten Sie die Exif-Rotation in video.js ⇐ JavaScript

[Anonymous]

Ich brauche Hilfe bei der Platzierung von Videos mit video.js.
Ausgehend von zwei identischen Videos, die sich nur in der Exif-Rotation unterscheiden (eines ist 0, das andere ist 270), zeigt das folgende Snippet einen einfachen VideoJS-Player und zwei Schaltflächen zum Laden von Videos mit Rotation 0 und Videos mit Rotation 270.
Wenn ich Videos mit Rotation 270 lade und die CSS-Klasse rotiert-270 anwende, um das Video zu drehen, lautet die Videoposition falsch platziert, ich muss es an derselben Position des Videos mit Drehung 0 platzieren.

Code: Select all

var options = {
controls: true,
techOrder: ['html5'],
plugins: {
},
playbackRates: [0.1, 0.2, 0.3, 0.4, 0.5, 0.8, 1.0, 1.5, 2.0, 4.0, 8.0],
muted: true,
controlBar: {
pictureInPictureToggle: false
}
};

var videoplayer = videojs('my-video', options);

var videoTech = videoplayer.el().querySelector('.vjs-tech');

var video1Btn = document.getElementById('video1-btn');
video1Btn.addEventListener('click', function() {

videoTech.classList.remove('rotated-270');

videoplayer.src({
src: 'https://github.com/francarl/francarl.github.io/raw/refs/heads/master/example/file_example_MP4_1280_10MG_r0.mp4',
type: 'video/mp4'
});
videoplayer.play();
});

var video2Btn = document.getElementById('video2-btn');
video2Btn.addEventListener('click', function() {

videoTech.classList.add('rotated-270');

videoplayer.src({
src: 'https://github.com/francarl/francarl.github.io/raw/refs/heads/master/example/file_example_MP4_1280_10MG_r270.mp4',
type: 'video/mp4'
});
videoplayer.play();
});

Code: Select all

.video-js .vjs-tech {
position: relative;
height: inherit;
transform-origin: center center;
border: red 2px solid;
}

.player {
width: 80%;
margin-left: auto;
margin-right: auto;
background: black;
}
.video-js .vjs-tech.rotated-270 {
transform: rotate(-90deg);
}

Code: Select all

Load Video rotation=0 
Load Video rotation=270




To view this video please enable JavaScript, and consider upgrading to a web browser that [url=http://videojs.com/html5-video-support/]supports HTML5 video[/url]

Vielen Dank.