html [桌面+移动视频英雄W /矩阵]允许使用Sitewrench的矩阵页面部分允许视频播放移动和桌面

Posted 2021-05-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html [桌面+移动视频英雄W /矩阵]允许使用Sitewrench的矩阵页面部分允许视频播放移动和桌面相关的知识，希望对你有一定的参考价值。

/* ====================== Video Components ====================== */

// desktop
.video-container {
  background-image: url('images/cover.jpg');
  background-position: center;
  background-size: cover;
  height: 100vh;
  -webkit-transition: all 0.75s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s;
  transition: all 0.75s cubic-bezier(0.2, 0.3, 0.25, 0.9) 0s;
  position: fixed;
  width: 100%;
  z-index: -1;

 iframe {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 56.25vw;
    min-height: 100vh;
    min-width: 177.77vh;
    -webkit-transition: all 1s ease;
  	transition: all 1s ease;

    &.loaded {
      opacity: 1;
    }
  }
}

// mobile
#bgvid {
	pointer-events: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100vw;
	min-height: 100vh;
}

//this will display vid depending on viewport size


$(document).ready(function() {
/* ==========================================================================
BKG Video
========================================================================== */ 

setTimeout(function(){
  $('.video-container iframe').addClass('loaded');
}, 3000);

// remove mobile video on desktop
if ( $(window).width() > 768 ) {
  $('#bgvid').remove();
}

// remove desktop video on mobile
if ( $(window).width() <= 768 ) {
  $('.video-container').remove();
}

}); // doc ready END

<!-- This is hardcoded -->

<body>
<asp:ContentPlaceHolder ID="videoBackground" runat="server" visible="true"></asp:ContentPlaceHolder>
</body>




<!-- This is in Matrix -->


<!-- Vimeo : for desktop -->
<div class="video-container">
	<iframe id="vimeo" allowfullscreen="" frameborder="0" height="100%" mozallowfullscreen="" src="{{Module.FieldValues.DesktopVideo}}?background=1" webkitallowfullscreen="" width="100%"></iframe>
</div>

<!-- Local : for mobile -->
<video poster="SiteFiles/2204/css/images/cover.jpg" id="bgvid" playsinline autoplay muted loop>
	<source src="{{Module.FieldValues.MobileVideo}}" type="video/mp4">
</video>



<!--Description: Select background videos for both desktop and mobile browsers. Desktop video must be a Vimeo link and mobile video must be a MP4 file hosted on SiteWrench.

single-line
label: Desktop Video (Vimeo link) Example: //player.vimeo.com/video/223309279
variable name: DesktopVideo

file
label: Mobile Video (MP4 video file in SiteWrench)
variable name: MobileVideo

以上是关于html [桌面+移动视频英雄W /矩阵]允许使用Sitewrench的矩阵页面部分允许视频播放移动和桌面的主要内容，如果未能解决你的问题，请参考以下文章

支持带有 HTML5 视频标签的桌面和移动客户端

如何让视频背景在 iPhone / 手机上播放？

桌面查看不同的视频和移动查看不同的视频自动播放

缩放、旋转、平移 w。 openGl ES 2.0 中的矩阵

如何为移动用户使用图片而不是视频