我正在为 Tizen OS 智能电视构建一个简单的应用程序。
该应用程序必须包含一个主要元素：视频播放器。
我已经为 WebOS 构建了它并且工作正常，但我注意到在 TizenOS 中视频播放器隐藏了“全屏按钮”。
我在 Tized Docs 端搜索发现了这个例子： https://docs.tizen.org/application/web/guides/w3c/supplement/fullscreen/
我尝试实现“切换全屏视频”按钮，但它不起作用，我希望接近解决方案......
这是完整的代码：
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
<script type ="text/javascript" src ="main.js"> </script>
<title>Mitology TV</title>
<style type="text/css">
body {
width: 100%;
height: 100%;
background-color: #202020;
}
h1 {
vertical-align: middle;
text-align: center;
color: #FFFFFF;
}
a {color:white; font-weight:900;font-family:'Montserrat',sans-serif;text-decoration:solid;}
#header{display:flex;justify-content:center;align-items:center;flex-direction:column;}
#clappr: full-screen{background:black;}
#clappr: -webkit-full-screen {background:black;}
#clappr{ width: 100%;height: 100%;position:relative; min-height: 600px;}
#clappr > div{ width:100%;height:100%;position: absolute;}
#clappr > div > div.media-control.live > div.media-control-layer {
width:85% !important;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
}
</style>
</head>
<body>
<div id="header">
<img src="images/MitologyTV-logo.png" style="width:200px;margin-top:120px;" />
<h1>La musica più bella di sempre ora la vedi in faccia.</h1>
</div>
<div id="clappr" style="border:2px solid white;width:80vw;margin:5% auto 0% auto;"></div>
<button id="toggleVideo">Toggle Video fullscreen</button>
<script>
var player = new Clappr.Player({
source:"https://64b16f23efbee.streamlock.net:443/mitologytv/mitologytv/playlist.m3u8",
parentId: "#clappr",
width: '100%',
height: '100%',
autoPlay: true,
//gaAccount: 'UA-44332211-1',
//gaTrackerName: 'MyPlayerInstance'
});
</script>
<script>
function toggleFullScreenHandler(e, target) {
var target = document.getElementById(target);
/* Check whether in fullscreen mode */
if (document.webkitIsFullScreen) {
/* Cancel the fullscreen mode */
document.webkitCancelFullScreen();
} else {
/* Switch on the fullscreen mode */
target.webkitRequestFullScreen();
}
}
document.getElementById('toggleVideo').addEventListener('click', function(e) {
toggleFullScreenHandler(e, 'clappr');
}, false);
document.addEventListener('click', function(e) {
toggleFullScreenHandler(e);
}, false);
</script>
</body>
</html>
非常感谢任何回答此帖子的人
最初我尝试将视频播放器的控制按钮变小，以为全屏按钮由于某种原因被剪掉了 -> 发现它已被禁用。
找到Tizen文档但无法正确实现： 此时的目标是在视频播放器下方添加一个按钮以使其全屏显示。
这些更改应在视频播放器下方添加一个“切换全屏”按钮，允许用户在单击时切换全屏模式。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
<title>Mitology TV</title>
<style type="text/css">
body {
width: 100%;
height: 100%;
background-color: #202020;
}
h1 {
vertical-align: middle;
text-align: center;
color: #FFFFFF;
}
a {
color: white;
font-weight: 900;
font-family: 'Montserrat', sans-serif;
text-decoration: solid;
}
#header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#clappr:full-screen {
background: black;
}
#clappr:-webkit-full-screen {
background: black;
}
#clappr {
width: 100%;
height: 100%;
position: relative;
min-height: 600px;
}
#clappr > div {
width: 100%;
height: 100%;
position: absolute;
}
#clappr > div > div.media-control.live > div.media-control-layer {
width: 85% !important;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
}
#toggleFullscreen {
display: block;
margin: 10px auto;
}
</style>
</head>
<body>
<div id="header">
<img src="images/MitologyTV-logo.png" style="width:200px;margin-top:120px;" />
<h1>La musica più bella di sempre ora la vedi in faccia.</h1>
</div>
<div id="clappr" style="border:2px solid white;width:80vw;margin:5% auto 0% auto;"></div>
<button id="toggleFullscreen">Toggle Fullscreen</button>
<script>
var player = new Clappr.Player({
source: "https://64b16f23efbee.streamlock.net:443/mitologytv/mitologytv/playlist.m3u8",
parentId: "#clappr",
width: '100%',
height: '100%',
autoPlay: true,
});
</script>
<script>
document.getElementById('toggleFullscreen').addEventListener('click', function() {
toggleFullScreenHandler('clappr');
}, false);
function toggleFullScreenHandler(targetId) {
var target = document.getElementById(targetId);
if (target.requestFullscreen) {
target.requestFullscreen();
} else if (target.mozRequestFullScreen) {
target.mozRequestFullScreen();
} else if (target.webkitRequestFullscreen) {
target.webkitRequestFullscreen();
} else if (target.msRequestFullscreen) {
target.msRequestFullscreen();
}
}
</script>
</body>
</html>