video实现有声音自动播放的实现方法


Posted in HTML / CSS onMay 20, 2020

video实现自动播放有声音

需求:老板见人家可以的,我们的也要可以!!!
前端:自动播放,简单...
要实现:鼠标移入视频播放同时有声音,移出让你暂停,,,,,

问题集合

1- 自动播放实现没有声音,
2- 怎么实现有声音自动播放?
3- 鼠标移入移出实现...

解决

1——了解故事背景:

因为曾经某些“邪恶”的前辈们,在页面中展示了很多类似

是兄弟就一起来-----我是(⊙_⊙)辉???

video实现有声音自动播放的实现方法

动感的画面,有趣的话语,曾经也被吸引住了,只是那个声音.....
简而言之————厂商认为用户体验不好,禁了声音
 

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 实现静音自动播放

<video id="demo" controls="controls" autoplay="autoplay" muted>
<source src="./conference_2.mp4" type="video/mp4">
</video>

ps: 视频想要实现自动播放,貌似必须加上muted属性

到此这篇关于video实现有声音自动播放的实现方法的文章就介绍到这了,更多相关video自动播放内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
你正在寻找的CSS3 动画技术
Jul 27 HTML / CSS
CSS3 选择器 基本选择器介绍
Jan 21 HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
May 09 HTML / CSS
HTML5 新事件 小结
Jul 16 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 HTML / CSS
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 HTML / CSS
Html5获取用户当前位置的几种方式
Jan 18 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 #HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 #HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 #HTML / CSS
html5简介及新增功能介绍
May 18 #HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 #HTML / CSS
Html5在手机端调用相机的方法实现
May 13 #HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 #HTML / CSS
You might like
PHP简洁函数小结
2011/08/12 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
js实现随机div颜色位置 类似满天星效果
2019/10/24 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
Python简单实现控制电脑的方法
2018/01/22 Python
python 正确保留多位小数的实例
2018/07/16 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
pytorch 修改预训练model实例
2020/01/18 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
诚信贷款承诺书
2014/05/30 职场文书
依法行政工作汇报
2014/10/28 职场文书
校运会新闻稿
2015/07/17 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书