怎么用js让video标签全屏啊？| 8月更文挑战

全文不看版：webkitEnterFullScreen，和requestFullScreen一样返回一个promise，但是连文档都找不到，不建议使用，非要用，额外注意一下android原生浏览器里的表现。

前两天调研完移动端视频行内播放，又接到了产品的这个需求，那么，能不能做呢？

前情提要，在移动端行内播放视频缩水版：

1. android 移动端默认直接行内播放，不会漂浮上去
2. safari 加 playsinline 和 webkit-playsinline
3. 微信在上面的基础上加 x5-video-player-type="h5" x5-video-player-fullscreen="portraint"
4. app 内，能发版的让客户端改 webview 配置，
   1. webview.allowsInlineMediaPlayback = true
   2. webview.mediaPlaybackRequiresUserAction = false
5. app内，不能发版的，视频又小的，iphone-inline-video
6. app内，不能发版的，视频大的，jsmpeg，先把代码转成ts

一番搜索之后，搜到了 Element.requestFullscreen 这个api，虽然兼容性看着不咋地，但是先试试再说

<button onclick="location.reload()">刷新页面</button>
<button onclick="playVideo()">播放视频</button>
<video muted type="video/mp4"
    src="https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/video/sintel-short.mp4"
    webkit-playsinline="true" playsinline="true" x5-video-player-type="h5"
    x5-video-player-fullscreen="portraint"></video>

<script>
    var video = document.querySelector('video');
  
    async function playVideo() {
        await video.requestFullscreen()
				video.play()
    }
</script>

测试结果：chrome可以，ios不行，android可以。 那么问题就到了为什么 ios 不行上，直接打印这个 dom 上的所有带 f 的方法。

<button onclick="location.reload()">刷新页面</button>
<button onclick="playVideo()">播放视频</button>
<video muted type="video/mp4"
    src="https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/video/sintel-short.mp4"
    webkit-playsinline="true" playsinline="true" x5-video-player-type="h5"
    x5-video-player-fullscreen="portraint"></video>

<script>
    var video = document.querySelector('video');

    async function playVideo() {
    		const obj = {}
    		for (const prop in video) {
        		if (prop.match(/f|Full/)) {
       					if (typeof video[prop] === 'function') {
            				obj[prop] = video[prop]
        				}
       			}
    		}
    		console.log(obj) // 坑爹呀
        await video.requestFullscreen()
				video.play()
    }
</script>

从console里可以找到一个很像的api，叫 webkitEnterFullScreen，试了下确实可以做到全屏，并且通过同样的方式，我们发现chrome和android里也有这个方法。但是mdn里并没有这个enterFullScreen的api介绍，通过9年前发布的[译]原生全屏JavaScript API 推断，这是ios早期就有，并且后面估计没有改过的api，风险极大。