doushi7394
doushi7394
2016-01-06 06:41

视频标签中的全屏按钮丢失

已采纳

full screen button in video tag missing when page containing video is loaded externally on another pages div

I have a page external.php . In this page when i use the following code

echo 
   '<video width="400" controls>
  <source src="movie.mp4" type="video/mp4">
</video>';

i get a video with full screen button in it on chrome.But when i try to load this external.php on another page (home.php) div the video is coming but the full screen button is missing.But in IE there is no such problem.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • doufan6033 doufan6033 5年前

    You can either solve this via CSS OR Fullscreen API.

    1. CSS

    I think you can accomplish this by changing the css for the #document fragments, these are DOM1 specs and supported by all browsers, but about the styling, I'm not sure. The following solution is webkit specific.

    You need just to write this code in your css:

    video::-webkit-media-controls-fullscreen-button {}
    

    2. Full screen API

    If you want to accomplish it by Fullscreen API check below demo first:

    Demo Full screen video

    As you can see a very simple demo showing HTML5 video in full screen, make sure you're using Chrome dev, webkit or firefox nightly.

    For more detail you can check it here. Browsers may provide a user interface, but shouldn't provide a programmable one.

    点赞 评论 复制链接分享