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弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
Mar 07 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
flex弹性布局详解
Mar 20 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和ACCESS写聊天室(二)
2006/10/09 PHP
php 高性能书写
2010/12/11 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
php 使用array函数实现分页
2015/02/13 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
django DRF图片路径问题的解决方法
2018/09/10 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
文职个人求职信范文
2013/09/23 职场文书
四年的个人工作自我评价
2013/12/10 职场文书
师德师风个人整改措施
2014/10/27 职场文书
班主任寄语2015
2015/02/26 职场文书
投诉信格式范文
2015/07/02 职场文书
小学语文教学随笔
2015/08/14 职场文书
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS