jw플레이어 영상 회전잘아시는분
본문
$jwplayer_script = '';
if($is_type == 'audio' && !$img && !$caption) {
$jwplayer_script .= '<script type="text/javascript">
jwplayer("'.$jw_id.'").setup({
file: "'.$file.'",
title: "'.$title.'",
width: "100%",
height: "40",
repeat: "file"
});
</script>'.PHP_EOL;
} else if($is_type == 'plist') {
$plist_set = (G5_IS_MOBILE) ? 'aspectratio: "16:9", listbar: { position: "right", size:150 }' : 'aspectratio: "16:9", listbar: { position: "right", size:200 }';
$jwplayer_script .= '<script type="text/javascript">
jwplayer("'.$jw_id.'").setup({
playlist: "'.$file.'",
width: "100%",
'.$plist_set.'
});
</script>'.PHP_EOL;
} else {
$img = $img ? 'image: "'.$img.'",' : '';
$caption = $caption ? 'tracks: [{file: "'.$caption.'"}],' : '';
$jwplayer_script .= '<script type="text/javascript">
jwplayer("'.$jw_id.'").setup({
file: "'.$file.'",
title: "'.$title.'",
'.$img.'
'.$caption.'
repeat: "true",
aspectratio: "16:9",
width: "100%"
});
</script>'.PHP_EOL;
}
모바일에서 가로영상을 재생시 전체화면누르면 화면이 회전해서 가로모드로 보여줘야하는데
세로모드로 전체화면되서 가로로 보여지는데 이런저런 방법을 다해봐도 씨알이 안먹히는데
해당 소스를 어떻게 수정해줘야지 제대로 먹힐까요
$jwplayer_script = '';
if($is_type == 'audio' && !$img && !$caption) {
$jwplayer_script .= '<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
var lastScrollPosition = 0;
var player = jwplayer("'.$jw_id.'").setup({
file: "'.$file.'",
title: "'.$title.'",
width: "100%",
height: "40",
repeat: "file"
aspectratio: "16:9"
});
document.addEventListener("fullscreenchange", handleFullscreenChange);
function handleFullscreenChange() {
if (document.fullscreenElement) {
lastScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
var container = player.getContainer();
var videoWidth = container.clientWidth;
var videoHeight = container.clientHeight;
var isPortrait = videoHeight > videoWidth;
if (!isPortrait && screen.orientation && screen.orientation.lock) {
screen.orientation.lock("landscape").catch(function(error) {
console.warn("Orientation lock not supported:", error);
});
}
} else {
setTimeout(function() {
window.scrollTo({ top: lastScrollPosition, behavior: "smooth" });
}, 50);
}
}
});
</script>'.PHP_EOL;
} else if($is_type == 'plist') {
$plist_set = (G5_IS_MOBILE) ? 'aspectratio: "16:9", listbar: { position: "right", size:150 }' : 'aspectratio: "16:9", listbar: { position: "right", size:200 }';
$jwplayer_script .= '<script type="text/javascript">
var lastScrollPosition = 0;
jwplayer("'.$jw_id.'").setup({
playlist: "'.$file.'",
width: "100%",
'.$plist_set.'
});
document.addEventListener("fullscreenchange", function() {
if (document.fullscreenElement) {
lastScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
var container = jwplayer("'.$jw_id.'").getContainer();
var videoWidth = container.clientWidth;
var videoHeight = container.clientHeight;
var isPortrait = videoHeight > videoWidth;
if (!isPortrait && screen.orientation && screen.orientation.lock) {
screen.orientation.lock("landscape").catch(function(error) {
console.warn("Orientation lock not supported:", error);
});
}
} else {
setTimeout(function() {
window.scrollTo({ top: lastScrollPosition, behavior: "smooth" });
}, 50);
}
});
</script>'.PHP_EOL;
} else {
$img = $img ? 'image: "'.$img.'",' : '';
$caption = $caption ? 'tracks: [{file: "'.$caption.'"}],' : '';
$jwplayer_script .= '<script type="text/javascript">
var lastScrollPosition = 0;
jwplayer("'.$jw_id.'").setup({
file: "'.$file.'",
title: "'.$title.'",
'.$img.'
'.$caption.'
repeat: "true",
aspectratio: "16:9",
width: "100%"
});
document.addEventListener("fullscreenchange", function() {
if (document.fullscreenElement) {
lastScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
var container = jwplayer("'.$jw_id.'").getContainer();
var videoWidth = container.clientWidth;
var videoHeight = container.clientHeight;
var isPortrait = videoHeight > videoWidth;
if (!isPortrait && screen.orientation && screen.orientation.lock) {
screen.orientation.lock("landscape").catch(function(error) {
console.warn("Orientation lock not supported:", error);
});
}
} else {
setTimeout(function() {
window.scrollTo({ top: lastScrollPosition, behavior: "smooth" });
}, 50);
}
});
</script>'.PHP_EOL;
}
이소스 가지고하면 영상회전은 되는데 문제가 영상 하나만 등록된 상태에서는 전체화면하게되면
가로로 회전이 되지가않아요 2개이상의 영상을 등록해야지 그제서야 영상이 가로로 회전하고
pc에서는 화면을 전환할필요가없으니 상관은없는데 모바일에서는 가로로 회전되야지 큰화면으로
볼수있는데 자꾸 세로전체화면에서 가로로 화면이 보여지네요