程序员经验分享-hwhale

在浏览器加载完毕后，自动播放视频：出现play() failed because the user didn't interact with the document first.错误

2023-11-11

问题：test.html:30 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>


        <video controls width="250" id="videoTest" autoplay playsinline >

    <source src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm"
            type="video/webm">

    <source src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm"
            type="video/mp4">

    Sorry, your browser doesn't support embedded videos.
</video>

        <script>

  var videoTest = document.getElementById('videoTest');
  videoTest.play();
        </script>
    </body>
</html>

解决方法：给video标签加入<video muted></video> 静音即可。

Chrome 66为了避免标签产生随机噪音。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端

video视频播放

在浏览器加载完毕后，自动播放视频：出现play() failed because the user didn't interact with the document first.错误 的相关文章

  • 2014百度校招笔试题之动态链接库&静态链接库详解

    1 什么是静态连接库 什么是动态链接库 静态链接库用通俗的话讲 静态库就是将代码编译到一个二进制文件下 通常扩展名为 LIB 然后客户端调用程序 只需要包含相关的 h文件及LIB库文件一起链接到exe文件中 可执行程序发布后 不再需要该 l

  • cookie默认有效期多长_惊艳面试官的 Cookie 介绍

    关注在看 以后更多干货分享在头条 Cookie 是什么 Cookie 是用户浏览器保存在本地的一小块数据 它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上 Cookie 主要用于以下三个方面 会话状态管理 如用户登录状态 购物

  • 亲测GO环境搭建，理解go build、go install、go get

    前言 秉承着作为一个新人 要有着 指哪打哪 的觉悟 在老大的需求下 顶上前端的空缺先干阵子前端 当然 在工作之余还是要好好朝着既定的方向努力的 实习结束后还了电脑 这次毕业再来换了新Mac 重新搭下Go的环境 顺便好好总结下 以后随着学习的

随机推荐

  • VMware虚拟机安装教程

    虚拟机 Virtual Machine 是通过软件模拟的完整计算机系统 在实体计算机中能够完成的工作在虚拟机中都能够实现 在计算机中创建虚拟机时 需要将实体机的部分硬盘和内存容量作为虚拟机的硬盘和内存容量 每个虚拟机都有独立的CMOS 硬盘

  • vue使用three.js并导入.obj模型

    下载three js等依赖 npm install three js data下面定义的 canvasDom null renderer null scene null camera null controls null 在需要用到thre

  • android 日历控件_UI界面开发工具Calendar日历插件示例合集

    适用于Visual C MFC ActiveX COM的Calendar控件为Windows开发人员提供了Outlook样式的日历和日期选择组件 您可以轻松创建日历 可以管理按日 周 工作周或月安排的约会 并提供了多个选项供您选择 包括集成

  • 离线安装Nginx（rpm方式）

    环境 centos7 9 下面将展示通过rpm方式安装Nginx 1 官方下载Nginx rpm包 下载地址 http nginx org packages 下载版本根据操作系统版本进行选择 本次操作系统是centos7 9 64位系统 所

  • dbcp

    initialSize 10 初始化连接 连接池启动时创建的初始化连接数量 默认值为0 maxActive 80 最大活动连接 连接池中可同时连接的最大的连接数 默认值为8 minIdle 10 最小空闲连接 连接池中最小的空闲的连接数 低

  • 30个Python极简代码

    Python 是机器学习最广泛采用的编程语言 它最重要的优势在于编程的易用性 如果读者对基本的 Python 语法已经有一些了解 那么这篇文章可能会给你一些启发 作者简单概览了 30 段代码 它们都是平常非常实用的技巧 我们只要花几分钟就能

  • webpack 模块加载兼打包工具——入门或进阶

    一 说点废话 1 webpack 是以 commonJS 的形式来书写脚本滴 但对 AMD CMD 的支持也很全面 方便旧项目进行代码迁移 2 能被模块化的不仅仅是 JS 了 3 开发便捷 能替代部分 grunt gulp 的工作 比如打包

  • 【Linux】Linux编程之 mmap解析

    前言 虚拟内存系统通过将虚拟内存分割为称作虚拟页 Virtual Page VP 大小固定的块 一般情况下 每个虚拟页的大小默认是4096字节 同样的 物理内存也被分割为物理页 Physical Page PP 也为4096字节 一 mma

  • Nuxt脚手架nuxi初始化失败原因&解决方法

    起因 前几天终于把毕业设计的开题报告整完了 有了一点时间干自己的事 于是就想着学学nuxt3 结果发现跟着官方教程敲的第一行命令就出现了问题 npx nuxi init nuxt3 app 这行代码是nuxt的脚手架 会生成一个最简单的模板

  • 连接器链调用---Spring源码从入门到精通(二十三)

    上篇文章主要介绍了methodInterceptor拦截器吧增强组件返回的过程 获取拦截器链MethodInterceptor Spring源码从入门到精通 二十二 这篇文章主要介绍拦截器链如何触发 一 拦截器链的触发过程 1 首先第一个判

  • 比Mojo慢68000倍，Python性能差的锅该给GIL吗？

    关注并星标腾讯云开发者 每周1 鹅厂工程师带你审判技术 第3期 李志瑞 天使还是魔鬼 聊聊 Python GIL 9 月 7 日 新兴编程语言 Mojo 正式发布 Mojo 的最初设计目标是比 Python 快 35000 倍 近期该团队表

  • Unity Hub登录无响应

    以下是我遇到的问题以及解决方案 在此之前这篇博文说的也很不错 可以参考一下 Unity Hub 3 登录无响应 无法登录 解决方式 主要是看能不能弹出来登录窗口 找了半天的解决方案 最终发现是默认浏览器的锅 去设置里改一下web浏览器 我用

  • web性能测试

    专业的软件测试工程师至少要掌握一到两种测试工具 而作为普通软件开发者 或多或少掌握一些测试方法和技巧 随着用户对科技产品用户体验度的上升 产品发布前的测试工作变得尤为重要 工欲善其事必先利其器 下面本文就推荐五款非常流行的Web性能测试工具

  • 对126邮箱进行自动化测试

    打开126邮箱页面 输入邮箱和密码 并点击企业邮箱 from selenium import webdriver import time dr webdriver Chrome dr get https mail 126 com time

  • [日记]LeetCode算法·二十五——二叉树⑤ AVL树（插入+删除）附代码实现

    本章的代码实现基于上一篇BST与优先队列的基类进行平衡二叉树 即AVL树 文章目录 AVL的概念 AVL查询效率 AVL的插入 1 插入节点 2 更新平衡因子BF 3 旋转调整树的结构 3 1 LL 右旋 3 2 RR 左旋 3 3 LR

  • 分布式系统数据同步问题

    分布式系统 通过数据冗余 来保证数据的安全 要写一个分布式系统 一道绕不过去的坎 那就是数据同步 同步 这两个字 折磨死了很多人 是同步 还是异步 是push 还是pull 谁是master 谁是slave 下线会怎样 上线了又会怎样 中心

  • 11个值得珍藏的4K高清壁纸网站推荐

    前言 由于前几天因需求须找一些视觉素材 翻来覆去整了一些 整理了10个图片素材网站可以给大家收藏使用 作为打开电脑 or 手机第一眼就看到的桌面 给它设置一个赏心悦目的桌面壁纸还是必不可少的 下面分享了 10 个值得珍藏的高清桌面壁纸网站

  • Solidworks渲染技巧如何不显示边线--显示样式设定

    如上图是带边线的显示 如果要出ps效果图 这样的边线存在会让效果图显得难看 因为默认是选定了带边线上色的显示样式 只要改成 上色 第二种的显示样式 即可不会带边线 另外如果想得到纯白色的背景色 选择应用布景选单白色 快速选择渲染颜色的技巧

  • protobuf安装教程

    protobuf安装 一 Windows下安装 下载protobuf 配置环境变量 检查是否安装成功 二 Linux下安装 下载protobuf 安装protobuf 检查是否安装成功 一 Windows下安装 下载protobuf 下载地

  • 在浏览器加载完毕后，自动播放视频：出现play() failed because the user didn't interact with the document first.错误

    问题 test html 30 Uncaught in promise DOMException play failed because the user didn t interact with the document first ht

热门标签