HTML中加入视频不自动播放问题
时间:2019-11-17
本文章向大家介绍HTML中加入视频不自动播放问题,主要包括HTML中加入视频不自动播放问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
今天做一个登陆页面的时候,网页里有个自动播放的视频背景,但是必须切换到一个视频时必须手动播放加了 autoplay="autoplay"也不行,视频并没有自动播放,按一下 F5 才会自动播放。最后,找资料发现,添加 muted 属性,也就是静音,就可以自动播放。
-
<video width=100% height=100% controls autoplay muted>
-
<source src="video/7.Ogg" alt="Second slide" style="width: 100%">
-
</video>
以上点 PC 桌面浏览器,HTML5 标签 audio 的 autoplay 属性可以设置在页面打开后自动播放。这个属性本来挺好的。但是最近做了一个项目却发现在 iphone 上无法自动播放。各种查阅资料后发现原来 iphone 公司是考虑到用户可能是用手机流量访问的情况,为了用户流量着想,所以需要用户交互后才能播放。虽然苹果公司是出于好心,但是如果网页打开之后还需要一个交互才能听到美妙的背景音乐,那么网站的体验效果自然差了很多。可是这种问题要怎么解决呢?冥思苦想了很久,终于做了一个艰难的决定。于是乎就这样尝试了一下:
-
$(function(){
-
$("#audio")[0].play();
-
})
没想到竟然好用!!!全部的代码是这样:
-
<html>
-
<head>
-
<script src="js/jquery.js"></script>
-
</head>
-
<body>
-
<audio id="audio" src="song.mp3" autoplay="autoplay">
-
您的浏览器不支持audio标签。
-
</audio>
-
<script type="text/javascript">
-
$(function(){
-
$("#audio")[0].play();
-
})
-
</script>
-
</body>
-
</html>
这里需要注意的是.play()方法是 element 的方法,所以需要 dom 节点,亲测 iphone 可用。
原文地址:https://www.cnblogs.com/idid/p/11877409.html
- Jmeter常用获取数据的几种方式
- [Silverlight 4 RC]RichTextBox概览
- WCF后续之旅(4):WCF Extension Point 概览
- Asp.Net无刷新上传并裁剪头像
- 用泛型的IEqualityComparer<T>接口去重复项
- python与office(一)
- Asp.net 后台添加CSS、JS、Meta标签(帮助类)
- 分享一下cookies操作(增、删、改、查)小经验
- [Silverlight 4 RC]WebBrowserBrush概览
- 一个例子理解C#位移
- WCF后续之旅(3): WCF Service Mode Layer 的中枢—Dispatcher
- silverlight 2 Random 随机数解决方案
- 开发中巧用Enum枚举类型
- Jquery 事件冒泡
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 【奇技淫巧】-- 最长连续序列
- 【redis】跟我一起动手玩玩redis主从复制和哨兵模式
- 【C++】八大排序算法 :GIF + 亲测代码 +专项练习平台
- 【C++】勉强能看的线程池详解
- 国密SSL协议之Java编程
- 7. Jackson用树模型处理JSON是必备技能,不信你看
- epoll,求知者离我近点
- SOCKET网络编程 (通俗易懂入门篇)
- 进程 · 全家桶
- Posix线程 它们那一大家子事儿,要觉得好你就收藏进被窝慢慢看(2)
- Posix线程 它们那一大家子事儿,要觉得好你就收藏进被窝里慢慢看 (1)
- 种树:二叉树、二叉搜索树、AVL树、红黑树、哈夫曼树、B树、树与森林
- 【Linux内核】进程管理
- Django后台管理界面修改(代码修改)
- OpsnSSH抓包分析 | SSH协议分析