【HTML】播放器如何自动播放【已解决】

自动播放器策略

先了解浏览器的自动播放器策略

  1. 始终允许静音自动播放
  2. 在以下情况,带声音的自动播放才会被允许
    2.1 用户已经与当前域进行交互
    2.2 在桌面上,用户的媒体参与指数阈值(MEI)已被越过,这意味着用户以前播放带有声音的视频。
    2.3 用户已将网站添加到移动设备上的主屏幕或者桌面上安装pwa
  3. 顶部帧可以将自动播放权限委派给其他iframe,以允许自动播放声音

媒体参与度(MEI,Media Engagement Index)

参与度衡量个人在网站上使用多媒体的倾向度

通过该链接查看你的媒体参与度:about://media-engagement

自动播放代码

1.方法一

bash 复制代码
<video url="xxxx" id="videoId"/>


let video = document.getElementById("videoId");

function play(){
	//视频元素可以选择静音后再播放,提示用户打开声音
    video.muted=true;//打开静音
    video.play();

    //判断当前是否可以用播放声音
    const ctx = new AudioContext();
    const canAutoPlay = ctx.state === 'running';//能播放声音返回running
    ctx.close();

    if(canAutoPlay){
    	video.muted = false;//取消静音
    }
}
play();

2.方法二

bash 复制代码
<!-- Autoplay is allowed. -->
<iframe src="xxxx" allow="autoplay">
 
<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="xxxx" allow="autoplay; fullscreen">

✨ 踩坑不易,还希望各位大佬支持一下 \textcolor{gray}{踩坑不易,还希望各位大佬支持一下} 踩坑不易,还希望各位大佬支持一下

📃 个人主页: \textcolor{green}{个人主页:} 个人主页: 沉默小管

📃 个人网站: \textcolor{green}{个人网站:} 个人网站: 沉默小管

📃 个人导航网站: \textcolor{green}{个人导航网站:} 个人导航网站: 沉默小管导航网

📃 我的开源项目: \textcolor{green}{我的开源项目:} 我的开源项目: vueCms.cn

🔥 技术交流 Q Q 群: 837051545 \textcolor{green}{技术交流QQ群:837051545} 技术交流QQ群:837051545

👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

如果有不懂可以留言,我看到了应该会回复

如有错误,请多多指教

相关推荐
成长ing121388 分钟前
cocos creator 3.x shader 流光
前端·cocos creator
Alo36516 分钟前
antd 组件部分API使用方法
前端
BillKu19 分钟前
Vue3数组去重方法总结
前端·javascript·vue.js
江城开朗的豌豆40 分钟前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
这里有鱼汤1 小时前
首个支持A股的AI多智能体金融系统,来了
前端·python
袁煦丞1 小时前
5分钟搭建高颜值后台!SoybeanAdmin:cpolar内网穿透实验室第648个成功挑战
前端·程序员·远程工作
摸鱼仙人~1 小时前
Vue.js 指令系统完全指南:深入理解 v- 指令
前端·javascript·vue.js
前端进阶者1 小时前
支持TypeScript并打包为ESM/CommonJS/UMD三种格式的脚手架项目
前端
星空下的曙光1 小时前
pnpm vs npm区别对比
前端·npm·node.js
啃火龙果的兔子1 小时前
React 图标库发布到 npm 仓库
前端·react.js·npm