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中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
CSS3 按钮边框动画的实现
Nov 12 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 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 mssql 日期出现中文字符的解决方法
2009/03/10 PHP
PHP 压缩文件夹的类代码
2009/11/05 PHP
php实现快速排序法函数代码
2012/08/27 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
Python break语句详解
2014/03/11 Python
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
python flask框架实现重定向功能示例
2019/07/02 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
Python3 读取Word文件方式
2020/02/13 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
自我鉴定怎么写
2013/12/05 职场文书
淘宝中秋节活动方案
2014/01/31 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
党员岗位承诺书
2014/03/25 职场文书
十佳护士先进事迹
2014/05/08 职场文书
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js