Html 移动设备中的 html5 自动播放视频

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/42160528/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 14:22:05  来源:igfitidea点击:

html5 autoplay video in Mobile device

html

提问by Sawan mishra

Auto play is not working without mutedattribute, when I try to open url in mobile device. How to play video without using mutedattribute ? I need to volume without click on muted button and one more important thing is that all thing will be working without JS and Jquery. enter image description here

当我尝试在移动设备中打开 url 时,如果没有静音属性,自动播放将不起作用。如何在不使用静音属性的情况下播放视频?我需要在不点击静音按钮的情况下进行音量调整,更重要的一点是,没有JS 和 Jquery一切都将正常工作。 在此处输入图片说明

回答by Dan H

You wont be able to achieve this in iOS without hacks. From the official Apple WebKit documentation:

如果没有黑客,您将无法在 iOS 中实现这一点。来自官方 Apple WebKit 文档:

Starting in iOS 10, WebKit relaxes its inline and autoplay policies to make these presentations possible, but still keeps in mind sites' bandwidth and users' batteries.

By default, WebKit will have the following policies:

  • video elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
  • video mutedelements will also be allowed to autoplay without a user gesture. If a element gains an audio track or becomes un-muted without a user gesture, playback will pause.

从 iOS 10 开始,WebKit 放宽了其内联和自动播放策略以使这些演示成为可能,但仍然牢记网站的带宽和用户的电池。

默认情况下,WebKit 将具有以下策略:

  • 如果视频元素的源媒体不包含音轨,则允许在没有用户手势的情况下自动播放。
  • 视频静音元素也将被允许在没有用户手势的情况下自动播放。如果元素在没有用户手势的情况下获得音轨或取消静音,播放将暂停。

https://webkit.org/blog/6784/new-video-policies-for-ios/

https://webkit.org/blog/6784/new-video-policies-for-ios/

As for Mobile Chrome (Android):

至于移动 Chrome (Android):

Muted autoplay for video is supported by Chrome for Android as of version 53. Playback will start automatically for a video element once it comes into view if both autoplay and muted are set, and playback of muted videos can be initiated progamatically with play(). Previously, playback on mobile had to be initiated by a user gesture, regardless of the muted state.

自 53 版起,Android 版 Chrome 支持静音自动播放视频。如果设置了自动播放和静音,视频元素进入视野后将自动开始播放,并且静音视频的播放可以通过 play() 以编程方式启动。以前,无论静音状态如何,移动设备上的播放都必须通过用户手势启动。

https://developers.google.com/web/updates/2016/07/autoplay

https://developers.google.com/web/updates/2016/07/autoplay

回答by bowl0stu

Simply include defaultMutedinline with your video to enable sound on autoplay. For example,

只需defaultMuted在您的视频中嵌入,即可在自动播放时启用声音。例如,

 <video id="myVideo" defaultMuted autoplay controls>
     <source src="myVideo.mp4" type="video/mp4">
 </video>

Reference: http://www.w3schools.com/tags/av_prop_defaultmuted.asp

参考:http: //www.w3schools.com/tags/av_prop_defaultmuted.asp

回答by Tugrul Yildirim

<video autoplay="autoplay" loop="loop" muted defaultMuted playsinline  oncontextmenu="return false;"  preload="auto"  id="myVideo">
        <source src="assets/video/1.mp4" type="video/mp4">
        </video>

This code worked for me on Ios and Android phone

此代码在 Ios 和 Android 手机上对我有用

回答by Gilbert123

On Ios make sure you don't have energy-saving on. This makes it so the video won't play.

在 Ios 上确保你没有开启节能功能。这使得视频无法播放。

回答by Nelu

I can't really make any sense of it but this managed to work on iOS Safari and Firefox (haven't tested Android):

我真的无法理解,但这设法在 iOS Safari 和 Firefox 上运行(尚未测试 Android):

<video playsinline autoplay muted loop id="DemoReel2018">
<source src="resources/AgsVision_backgroundMovie.mp4" type="video/mp4">
</video>

...thing is, it only work after I set the viewport:

...事情是,它只在我设置视口后工作:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

If anyone can actually explain why that happened, I'd really want to know. Otherwise...stay tuned for more wacky stuff :))

如果有人能真正解释为什么会这样,我真的很想知道。否则......请继续关注更多古怪的东西:))

回答by Hiren Pipariya

May be this will work for you

可能这对你有用

<video  autoplay="autoplay" loop="loop" muted defaultMuted playsinline>

回答by swap

You Try this one link also they have provide more Information about Why The Change?:

你试试这个链接,他们也提供了更多关于为什么改变的信息?:

https://developers.google.com/web/updates/2016/07/autoplay

https://developers.google.com/web/updates/2016/07/autoplay

回答by Alessandro Gon?alves

Its simple see the code:

简单看代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example movie autoplay</title>
    <meta charset="UTF-8">                
</head>
<body>
    <video autoplay muted>
        <source src="midia/video.mp4" type="video/mp4">
        <source src="midia/video.webm" type="video/webm">
    </video>
</body>
</html>

You need check the browsers and the formats supported.

您需要检查浏览器和支持的格式。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Browser_compatibility

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Browser_compatibility

https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats