html - 在 wordpress 上为移动设备添加视频背景

Question

想知道您是否可以提供帮助。我一直在尝试将背景 mp4 添加到我为客户开发的 WordPress 网站。我已经解释过，由于数据使用，这是一个坏主意，但他坚持要这样做。

当我添加 mp4 时，我很快了解到默认情况下不支持此操作。但是，必须有一个变通办法。我已经阅读了这里的帖子并进行了广泛的谷歌搜索。

到目前为止，我想到的是使用@media 来解决。

@media screen and (min-width: 600px) {
.header-video {
    display: block !important;
}
}

但是，这似乎也不起作用。除了制作 gif 有没有其他方法？

附加的 HTML 代码: -- 我对带有 MP4 的视频循环标签感兴趣

<div id="main-content">


			
				<article id="post-54" class="post-54 page type-page status-publish hentry">

				
					<div class="entry-content">
					<div id="et-boc" class="et-boc">
			
			<div class="et_builder_inner_content et_pb_gutters3"><div class="et_pb_section et_pb_section_0 header-video et_pb_section_video et_pb_preload et_pb_with_background et_section_regular">
				
				
				<span class="et_pb_section_video_bg">
					
			<video loop="loop" autoplay playsinline muted >
				<source type="video/mp4" src="http://fortuna-x.com/wp-content/uploads/2018/07/Deep-Network-Green-Blue.mp4" />
				
			</video>
				</span>
				
					<div class="et_pb_row et_pb_row_0">
				<div class="et_pb_column et_pb_column_1_3 et_pb_column_0    et_pb_css_mix_blend_mode_passthrough et_pb_column_empty">
				
				
				
			</div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_2_3 et_pb_column_1    et_pb_css_mix_blend_mode_passthrough et-last-child et_pb_column_empty">
				
				
				
			</div> <!-- .et_pb_column -->
				
				
			</div> <!-- .et_pb_row --><div class="et_pb_row et_pb_row_1 et_pb_equal_columns et_pb_gutters150">
				<div class="et_pb_column et_pb_column_1_3 et_pb_column_2    et_pb_css_mix_blend_mode_passthrough">
				

Answer 1

截至 2018 年 4 月。Chrome Autoplay policy已经改变。为了在网站上自动播放您的视频，您的媒体参与分数需要很高。来自文档的示例。

Example 1: Every time a user visits VideoSubscriptionSite.com on their laptop they watch a TV show or a movie. As their media engagement score is high, autoplay is allowed.

Example 2: GlobalNewsSite.com has both text and video content. Most users go to the site for text content and watch videos only occasionally. Users' media engagement score is low, so autoplay wouldn't be allowed if a user navigates directly from a social media page or search.

Example 3: LocalNewsSite.com has both text and video content. Most people enter the site through the homepage and then click on the news articles. Autoplay on the news article pages would be allowed because of user interaction with the domain. However, care should be taken to make sure users aren't surprised by autoplaying content.

Example 4: MyMovieReviewBlog.com embeds an iframe with a movie trailer to go along with their review. The user interacted with the domain to get to the specific blog, so autoplay is allowed. However, the blog needs to explicitly delegate that privilege to the iframe in order for the content to autoplay.

要检查你的媒体评分是否足够高，你可以这样检查。

var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

因此，如果出现错误，您可以显示播放按钮。然后用户需要点击它来开始播放视频。