Question

当我仅使用 <Button Style="{StaticResource IconButtonStyle}" IconControl.IconUri="/Files/Icons/yes.png" IconControl.Label="Accept" />时，它仅在网页上起作用，全屏按钮只是显示为灰色，我无法单击它。我尝试搜索此文件，但找不到任何东西。请帮忙！

Answer 1

您不必使用<embed>标签。尝试改用<video>标签以及此代码段。您也可以使用<iframe>属性设置为“ true”的allowfullscreen，但在本示例中不再赘述。请注意，尝试在Stack Overflow上运行此代码段不起作用，因为必须有一些功能对其进行阻止，但它在我制作的JSFiddle中确实起作用：https://jsfiddle.net/pa85umLo/。另一个重要的注意事项是，全屏API不适用于所有浏览器-特别是不适用于移动浏览器，因为这是它们正在使用的新功能。最后要注意的一点是，我提供的“全屏”按钮仅在视频控件上的切换按钮没有弹出时才用于备份；制作JSFiddle时，除了我的按钮之外，还有切换按钮，但是有时候默认情况下它不会弹出，就像我前面说的那样。 CSS选择器仅适用于Chrome。

HTML：

<div id="wrapper">
  <section>
    <video id="video" width="490" height="276" controls>
    <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4">
    <p>
      Your browser doesn't support HTML5 video.
    </p>
  </video>
  </section>
  <button id="video-button">Fullscreen Video</button>
</div>

JS：

var requestFullscreen = function (element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    } else {
        console.log('Fullscreen API is not supported.');
    }
};

var fullscreenVideo = document.getElementById('video-button');
var video = document.getElementById('video');

fullscreenVideo.addEventListener('click', function(e) {
    e.preventDefault();
    requestFullscreen(video);
});

CSS：

video::-webkit-media-controls-fullscreen-button { visibility: visible; }

有没有一种方法可以使用<embed>标签嵌入视频，而该标签允许全屏显示？

1 个答案: