video标签全屏按钮置灰了

不能够全屏播放。video部分视频是不能够全屏播放的，会通过标签全屏按钮置变灰来表示，变灰了是表示不能够全屏播放。视频（Video）泛指将一系列静态影像以电信号方式加以捕捉，纪录，处理，储存，传送，与重现的各种技术。

一共支持三种格式： Ogg、MPEG4、WebM。但这三种格式对于浏览器的兼容性却各不同。

重点：比如MP4格式，MP4只是一个容器，里面还有一个叫编码器的东西。格式虽然都是MP4但是html中只支持H264的编码格式。所以要用软件来转码。

MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器

WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器

Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

补充： 有时会出现视频封面无法铺满的情况，需要使用 object-fit 属性铺满整个屏幕

如果是PC电脑上，完全可以用video标签controlsList属性，修改成如下即可！

//去除右键事件

>

<video>标签为html5新增标签。在广东互联网协会官网项目中，首页引入了一次此标签，使用了preload属性以及webkit-playsinline属性。首次使用<video>实践真实项目，所以我想根据w3school上对该标签的描述，对其进行一次使用方法的总结。

属性：

2、<source>标签

例如：

3、ios端不自动全屏播放

之前一次项目中用到video，个了这么久才想到记一下坑

video标签在移动端使用中遇到的问题

x5-video-player-type ：启用同层H5播放器，就是在视频全屏的时候，div可以呈现在视频层上，也是WeChat安卓版特有的属性。同层播放别名也叫做沉浸式播放，播放的时候看似全屏，但是已经除去了control和微信的导航栏，只留下"X"和"<"两键。目前的同层播放器只在Android（包括微信）上生效，暂时不支持iOS。笔者想过为什么同层播放只对安卓开放，因为安卓不能像ISO一样局域播放，默认的全屏会使得一些界面 *** 作被阻拦，如果是全屏H5还好，但是做直播的话，诸如d幕那样的功能就无法实现了，所以这时候同层播放的概念就解决了这个问题。不过笔者在测试的过程中发现，不同版本的ISO和安卓效果略有不同。

webkit-playsinline playsinline ：视频播放时局域播放，不脱离文档流 。但是这个属性比较特别， 需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webviewallowsInlineMediaPlayback = YES，才能生效。换句话说，如果APP不设置，你页面中加了这标签也无效，这也就是为什么安卓手机WeChat 播放视频总是全屏，因为APP不支持playsinline，而ISO的WeChat却支持。

//模拟F11

function F11key(){

//判断是否ie并进行相应的全屏

//requestFullScreen()

var navigatorName = "Microsoft Internet Explorer";  

if( navigatorappName == navigatorName ){  

//alert("ie")

var WsShell = new ActiveXObject('WScriptShell')

WsShellSendKeys('{F11}');

}else{

var de = documentdocumentElement;

if (derequestFullscreen) {

derequestFullscreen();

} else if (demozRequestFullScreen) {

demozRequestFullScreen();

} else if (dewebkitRequestFullScreen) {

dewebkitRequestFullScreen();

}else if (demsRequestFullscreen) {

demsRequestFullscreen();

}

//alert("not ie")

}

}

以上就是关于video标签全屏按钮置灰了全部的内容，包括:video标签全屏按钮置灰了、h5 video 视频播放开发 和 问题集合、五、<video>标签的使用等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！