Question

当用户在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>

Answer 1

<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

（未经测试）

Answer 2

对于解决方案，我使用了以下代码：

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

Answer 3

只需使用https://customelements.io/vguillou/fullscreen-api/

中的customer element 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>

聚合物更改：html5视频全屏时动态主机{}

3 个答案: