当用户在html5视频中全屏点击时,是否可以将:host
从block
动态切换到inline
?
当 html5 视频全屏显示时,元素本身没有任何我可以做:host(element-attribute)
.
我挠头,试图找到一种方法。
<dom-module id="video-player">
<template>
<style>
:host {
display: block;
width: 100%;
position: relative;
margin-left: 100%;
}
.v-center {
@apply(--layout-horizontal);
@apply(--layout-center-center);
padding-top: 5%;
background-color: black;
overflow-y: scroll;
height: 100%;
}
video {
padding-bottom: 300px;
}
video:-webkit-full-screen {
padding-bottom: 0;
}
video:-webkit-full-screen * {
display: inline;
}
</style>
<iron-media-query query="(max-width: 600px)"
query-matches="{{smallScreen}}"></iron-media-query>
<iron-meta id="meta2" key="foo" value="filler"></iron-meta>
<div class='v-center' hidden$="{{!smallScreen}}">
<video width="90%" controls src="{{videoUrl}}"></video>
</div>
<div class='v-center' hidden$="{{smallScreen}}">
<video width="40%" controls src="{{videoUrl}}"></video>
</div>
</template>
<style>
:host {
--host-display: block;
display: var(--host-display);
width: 100%;
position: relative;
margin-left: 100%;
}
<video width="40%" controls src="{{videoUrl}}"
on-fullscreenchange="setDisplay"></video>
setDisplay: function () {
var display = document.fullscreenEnabled ? 'inline' : 'block';
this.customStyle['--host-display'] = display;
this.updateStyles();
}
另请参阅 https://developer.mozilla.org/en-US/docs/Web/Events/fullscreenchange
(未测试)
对于解决方案,我使用了以下代码:
function html5VideoFix() {
document.addEventListener("webkitfullscreenchange", function() {
if (document.webkitIsFullScreen) {
videoPlayer.style.display = 'inline';
} else {
videoPlayer.style.display = 'block';
}
}, false);
document.addEventListener("mozfullscreenchange", function() {
if (document.mozFullScreen) {
videoPlayer.style.display = 'inline';
} else {
videoPlayer.style.display = 'block';
}
}, false);
}
只需使用 https://customelements.io/vguillou/fullscreen-api/中的客户元素fullscreen_api
代码示例。不要忘记下载并导入自定义元素。
<template is="dom-bind">
<fullscreen-api id="fsapi" fullscreen-available="{{fullscreenAvailable}}"></fullscreen-api>`enter code here`
<button type="button" onclick="goFullscreen()" hidden$="[[!fullscreenAvailable]]">Display this page in full screen mode</button>
<div id="errorDiv" hidden$="[[fullscreenAvailable]]">
Your browser does not support the HTML5 full screen API... :(
</div>
</template>
<script>
function goFullscreen() {
var fsapi = document.querySelector('#fsapi');
fsapi.toggleFullscreen();
}
</script>