Начиная с двух одинаковых видео, которые отличаются только поворотом 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
Мобильная версия