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个性化字体_动力节点Java学院整理
Jul 12 HTML / CSS
今天学到的CSS最新技术(与图片背景相关)
Dec 24 HTML / CSS
纯css3(无图片/js)制作的几个社交媒体网站的图标
Mar 21 HTML / CSS
css3实现超炫风车特效
Nov 12 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
Jan 23 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 HTML / CSS
CSS基础详解
Oct 16 HTML / CSS
CSS中实现动画效果-附案例
Feb 28 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
德劲1103二次变频版的打磨
2021/03/02 无线电
PHP.MVC的模板标签系统(五)
2006/09/05 PHP
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
python中map()函数的使用方法示例
2017/09/29 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
全球度假村:Club Med
2017/11/27 全球购物
轻松制作精彩视频:Animoto
2018/09/19 全球购物
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
软件研发工程师岗位职责
2014/09/30 职场文书
内勤岗位职责
2015/02/10 职场文书
综合素质自我评价评语
2015/03/06 职场文书
Python中的xlrd模块使用整理
2021/06/15 Python
mysql中整数数据类型tinyint详解
2021/12/06 MySQL