Управлять ротацией exif в video.jsJavascript

Форум по Javascript
Ответить
Anonymous
 Управлять ротацией exif в video.js

Сообщение Anonymous »

Мне нужна помощь в размещении видео с помощью video.js.
Начиная с двух одинаковых видео, которые отличаются только поворотом exif (один — 0, другой — 270), в следующем фрагменте показан простой проигрыватель videojs и две кнопки для загрузки видео с вращением 0 и видео с вращением 270.
При загрузке видео с вращением 270, когда я применяю класс CSS Rotated-270 для поворота видео, позиция видео неуместно, мне нужно поместить его в ту же позицию видео с поворотом 0.

Код: Выделить всё

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();
});

Код: Выделить всё

.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);
}

Код: Выделить всё


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]





Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/798 ... n-video-js
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»