【问题标题】:HTML5 Video wont play/autoplayHTML5 视频无法播放/自动播放
【发布时间】:2019-02-21 07:49:29
【问题描述】:

我想在div 中添加一个视频(我想把它作为这个元素的背景视频)。

我添加了视频,我看到了视频的第一张图片,但它不会开始/播放。

当我阅读有关 HTML5 和视频的内容时,我想我已经设置了它需要的所有属性,但肯定有一个我看不到的错误。

<div class="myclass" id="caption" contenteditable="true">
<video autoplay="" loop="" id="video-background-7608" muted="" plays-inline="" poster="">
<source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&amp;profile_id=119&amp;oauth2_token_id=57447761" type="video/mp4"></video>

some content in my <span>div</span>
<img...>
</div>

我在控制台或网络报告中没有看到任何错误。

这里 https://dev.w3.org/html5/pf-summary/video.html#attr-media-autoplay我看了 "自动播放 DOM 属性必须反映同名的内容属性"

云是我需要的点吗?什么意思?

谢谢你帮我解决!

【问题讨论】:

  • 它对我有用。铬浏览器。请检查以下看起来相似的内容:stackoverflow.com/questions/16965170/…
  • 我认为肯定还有其他问题。如果我将代码从codepen.io/mattgrosswork/pen/jrdwK 复制到我的页面中,我也会遇到同样的问题,我只能看到第一张图片或海报
  • 我认为它基于浏览器默认设置...就像我说的 chrome 工作。参考文章还说明了有关音频等的内容
  • codepen 也适合我
  • 默认忽略自动播放属性,但用户可以启用自动播放行为 (caniuse.com/#feat=video)。

标签: html video


【解决方案1】:

尝试在您的 div 中删除 contenteditable="true"

<div class="myclass" id="caption">
    <video controls autoplay>
        <source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&amp;profile_id=119&amp;oauth2_token_id=57447761" type="video/mp4">
    </video>
</div>

【讨论】:

  • 这不会改变任何事情
【解决方案2】:

尝试设置autoplay="autoplay" 您很可能遇到了浏览器问题或有扩展程序或其他东西阻止它自动播放。

Similar question 如上所述

【讨论】:

  • autoplay="autoplay" 无济于事...我认为肯定还有另一个问题。如果我将 codepen.io/mattgrosswork/pen/jrdwK 中的代码复制到我的页面中,我会遇到同样的问题,我只能看到第一张图片或海报
  • 尝试在不同的浏览器中运行它
  • 在 codepen 我看到了视频播放 - 所以我认为这是我的网站、服务器、设置或其他什么问题
【解决方案3】:

如果视频未静音,大多数浏览器都会要求用户启动视频。尝试静音。

像这样:

<div class="myclass" id="caption" contenteditable="true">
<video autoplay="" loop="" id="video-background-7608" muted="muted" plays-inline="" poster="">
<source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&amp;profile_id=119&amp;oauth2_token_id=57447761" type="video/mp4"></video>

some content in my <span>div</span>
<img...>
</div>

【讨论】:

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-11-25
  • 1970-01-01
  • 2014-04-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多