video实现有声音自动播放
video实现自动播放有声音
需求：老板见人家可以的，我们的也要可以！！！
前端：自动播放，简单...
要实现：鼠标移入视频播放同时有声音，移出让你暂停，，，，，
问题集合
1- 自动播放实现没有声音，
2- 怎么实现有声音自动播放？
3- 鼠标移入移出实现...
解决
1——了解故事背景：
因为曾经某些“邪恶”的前辈们，在页面中展示了很多类似
是兄弟就一起来-----我是(⊙_⊙)辉？？？
动感的画面，有趣的话语，曾经也被吸引住了，只是那个声音.....
简而言之————厂商认为用户体验不好，禁了声音
2—— 相关资料、实现：
其实，也可以实现自动播放时声音也播放
在体验差的同时，厂商为了照顾开发者，允许用户交互之后实现播放，例如点击等操作（神马鬼意思？）
即两种选择：
1—— 视频实现自动播放，但是要静音，在标签中添加muted属性，就能实现自动播放
2—— 视频实现自动播放，有声音，这个要在文档与用户之间有操作之后才能实现（随便点一下页面，就ok）
暂时不涉及深入就不搞demo地址啥的了，不信复制测试一下吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>video播放问题</title>
<style>
#demo{
height: 500px;
width: 1400px;
}
.demo1{
width: 700px;
height: 500px;
float: left;
}
.demo1 video{
height: 400px;
width: 400px;
}
.demo2{
width: 700px;
height: 500px;
float: left;
}
.demo2 video{
height: 400px;
width: 400px;
}
</style>
<script>
function play_v1(v){
v.play()
}
function stop_v1(v){
v.pause();
}
</script>
</head>
<body>
<div>
<div id="v1_box" class="demo1">
<p>1：静音、自动播放</p>
<video onmouseover="play_v1(this)" onmouseleave="stop_v1(this)" muted src="http://yh2019.oss-cn-beijing.aliyuncs.com/35cc8560068b47d78ee18a118e2982ee/video/e2474c04cbff49089132a92579fb5ac7.mp4"></video>
</div>
<div id="v2_box" class="demo2">
<p>2:有声音、自动播放（至少需要点击一下文档，产生交互）</p>
<video onmouseover="play_v1(this)" onmouseleave="stop_v1(this)" src="http://yh2019.oss-cn-beijing.aliyuncs.com/35cc8560068b47d78ee18a118e2982ee/video/e2474c04cbff49089132a92579fb5ac7.mp4"></video>
</div>
</div>
</body>
</html>
video实现有声音自动播放的更多相关文章
- Chrome 66 禁止声音自动播放
声音无法自动播放一直在IOS/Android上面都是一个惯例, 桌面端的 Safari在2017年的11版本中也宣布禁止带有声音的多媒体自动播放, 紧接着2018年4月份Chrome发布的66版本也正 ...
- Chrome 声音自动播放抱错问题【play() failed】
Chrome下调用play后抱错:DOMException: play() failed because the user didn't interact with the document firs ...
- 【转】解决chrome浏览器不支持audio和video标签的autoplay自动播放
声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 ...
- html 中video标签视频不自动播放的问题
有个需求,客户想做个打开官网自动播放一段视频,楼主使用了video标签,即下面的代码::于是我在video标签上添加了属性 autoplay=“autoplay” loop=“loop”然而通过地址栏 ...
- 解决audio和video在手机端无法自动播放问题
各大浏览器都为了节省流量,做出了优化,在用户没有行为动作时(交互)不予许自动播放 <audio src="music/bg.mp3" autoplay loop contro ...
- 微信video和audio无法自动播放解决方案
//音频,写法一<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio> // ...
- video 手机全屏自动播放
<video src="video.mp4" id="video" x-webkit-airplay="true" webkit-pl ...
- 在ios中微信video和audio无法自动播放解决方案
WeixinJSBridgeReady页面初始化的时候会执行 document.addEventListener("WeixinJSBridgeReady", function ( ...
- html5的video标签自动播放
概念澄清 这里的"自动播放",是指用户的视觉效果,并不一定是元素自身的自动播放. 查看相关文档后,有以下两种最简方案. 配置属性 发现有video标签有一个自动播放的属性autop ...
随机推荐
- 登录注册beta版
注册 login_count = 0 username_inp = input('请输入用户名:') while login_count < 3: pwd_inp = input('请输入密码: ...
- 云原生应用 Kubernetes 监控与弹性实践
前言 云原生应用的设计理念已经被越来越多的开发者接受与认可,而Kubernetes做为云原生的标准接口实现,已经成为了整个stack的中心,云服务的能力可以通过Cloud Provider.CRD C ...
- oracle函数 TO_NUMBER(X[[,c2],c3])
[功能]将字符串X转化为数字型 [参数]c2,c3,字符型,参照to_char() [返回]数字串 [相反] to_char(date[[,c2],c3]) [示例] select TO_NUMBER ...
- Python基础：15私有化
默认情况下,属性在Python 中都是“public”. 1:双下划线(__) Python 为类元素(属性和方法)的私有性提供初步的形式.由双下划线开始的属性在运行时被“混淆”,所以直接访问是不允许 ...
- laravel 随笔
laravel5.5 1.laravel 查询数据库默认返回对象,如何改成 返回值为数组 答:在 App\Providers\EventServiceProvider 文件中 第一步: use Il ...
- oracle函数 current_date
[功能]:返回当前会话时区中的当前日期 [参数]:没有参数,没有括号 [返回]:日期 [示例]select current_date from dual; 返回:2008-11-14
- Python 基础09 面向对象的进一步拓展
调用类的其他信息 上一讲中提到,在定义方法时,必须有self这一个参数,这个参数表示某个对象,对象有有类的所有性质, 那么我么可以通过self 调用类属性. class Human(object): ...
- Android Studio(十二)：打包多个发布渠道的apk文件
Android Studio相关博客: Android Studio(一):介绍.安装.配置 Android Studio(二):快捷键设置.插件安装 Android Studio(三):设置Andr ...
- 二叉堆&&左偏堆 代码实现
今天打算学习左偏堆,可是想起来自己二叉堆都没有看懂,于是就跑去回顾二叉堆了.发现以前看不懂的二叉堆,今天看起来特简单,随手就写好了一个堆了. 简单的说一下我对二叉堆操作的理解.我不从底层函数说上去,相 ...
- HTML5--语法
一.标记方法 1.内容类型(ContentType)还是.text/html 2.声明:<!DOCTYPE html SYSTEM “about:legacy-compat”> 3.字符编 ...