html video 不重叠,关于Html中video标签存在的一些坑

class="video"

src:"" /**视频路径*/

width="100%"

controlslist="nodownload" /**禁止出现下载视频按钮*/

poster=“https://s2.ax1x.com/2019/08/29/mLSqD1.jpg” /*视频封面图*/

height="240px" /*如果有封面，请设置高度*/

controls /*这个属性规定浏览器为该视频提供播放控件*/

style="object-fit:fill" /*加这个style会让 Android / web 的视频在微信里的视频全屏，如果是在手机上预览，会让视频的封面同视频一样大小*/

webkit-playsinline="true" /*这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/

x-webkit-airplay="true" /*这个属性还不知道作用*/

playsinline="true" /*IOS微信浏览器支持小窗内播放*/

x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/

x5-video-orientation="h5" /*播放器支付的方向，landscape横屏，portraint竖屏，默认值为竖屏*/

x5-video-player-fullscreen="true" /*全屏设置，设置为 true 是防止横屏*/

preload="auto" /*这个属性规定页面加载完成后载入视频*/

由于在部分浏览器(360 IE)中没有全屏显示的按钮 这时候需要你手写一个视频全屏播放的方法 如下：

html代码

style="width:100%; height: auto;object-fit: fill; margin-top:.38rem" controls="true" preload="auto"

controlslist="nodownload" :src="videos[0].video">

全屏播放

js代码var invokeFieldOrMethod = function (element, method) {

var usablePrefixMethod;

["webkit", "moz", "ms", "o", ""].forEach(function (prefix) {

if (usablePrefixMethod) return;

if (prefix === "") {

method = method.slice(0, 1).toLowerCase() + method.slice(1);

}

var typePrefixMethod = typeof element[prefix + method];

if (typePrefixMethod + "" !== "undefined") {

if (typePrefixMethod === "function") {

usablePrefixMethod = element[prefix + method]();

} else {

usablePrefixMethod = element[prefix + method];

}

}

});

return usablePrefixMethod;

};

//进入全屏模式

function launchFullscreen(element) {

if (element.requestFullscreen) {

element.requestFullscreen();

} else if (element.mozRequestFullScreen) {

element.mozRequestFullScreen();

} else if (element.msRequestFullscreen) {

element.msRequestFullscreen();

} else if (element.oRequestFullscreen) {

element.oRequestFullscreen();

} else if (element.webkitRequestFullscreen) {

element.webkitRequestFullScreen();

} else {

var docHtml = document.documentElement;

var docBody = document.body;

var videobox = document.getElementById('videobox');

var cssText = 'width:100%;height:100%;overflow:hidden;';

docHtml.style.cssText = cssText;

docBody.style.cssText = cssText;

videobox.style.cssText = cssText + ';' + 'margin:0px;padding:0px;';

document.IsFullScreen = true;

}

}

//退出全屏

function exitFullscreen() {

if (document.exitFullscreen) {

document.exitFullscreen();

} else if (document.msExitFullscreen) {

document.msExitFullscreen();

} else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen();

} else if (document.oRequestFullscreen) {

document.oCancelFullScreen();

} else if (document.webkitExitFullscreen) {

document.webkitExitFullscreen();

} else {

var docHtml = document.documentElement;

var docBody = document.body;

var videobox = document.getElementById('videobox');

docHtml.style.cssText = "";

docBody.style.cssText = "";

videobox.style.cssText = "";

document.IsFullScreen = false;

}

}

function amplification() {

launchFullscreen(document.getElementById('video'));

window.setTimeout(function exit() {

if (invokeFieldOrMethod(document, 'FullScreen') || invokeFieldOrMethod(document, 'IsFullScreen') ||

document.IsFullScreen) {

exitFullscreen();

}

}, 5 * 1000);

}

如果使用了 嵌套的网页播放的Video   即使手写全屏也无效怎么办呢  不要着急

只需要在iframe标签内加入一个 allowfullscreen="true" 的属性就ok啦

即

拓展：--------------------------video的另一种写法-------------------

class="video"

width="100%"

controlslist="nodownload" /**禁止出现下载视频按钮*/

poster=“https://s2.ax1x.com/2019/08/29/mLSqD1.jpg” /*视频封面图*/

height="240px" /*如果有封面，请设置高度*/

controls /*这个属性规定浏览器为该视频提供播放控件*/

style="object-fit:fill" /*加这个style会让 Android / web 的视频在微信里的视频全屏，如果是在手机上预览，会让视频的封面同视频一样大小*/

webkit-playsinline="true" /*这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/

x-webkit-airplay="true" /*这个属性还不知道作用*/

playsinline="true" /*IOS微信浏览器支持小窗内播放*/

x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/

x5-video-orientation="h5" /*播放器支付的方向，landscape横屏，portraint竖屏，默认值为竖屏*/

x5-video-player-fullscreen="true" /*全屏设置，设置为 true 是防止横屏*/

preload="auto" /*这个属性规定页面加载完成后载入视频*/

>

/**视频地址*/

本文最后更新于2020-2-8，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！

分享到：