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实现有声音自动播放的更多相关文章

  1. Chrome 66 禁止声音自动播放

    声音无法自动播放一直在IOS/Android上面都是一个惯例, 桌面端的 Safari在2017年的11版本中也宣布禁止带有声音的多媒体自动播放, 紧接着2018年4月份Chrome发布的66版本也正 ...

  2. Chrome 声音自动播放抱错问题【play() failed】

    Chrome下调用play后抱错:DOMException: play() failed because the user didn't interact with the document firs ...

  3. 【转】解决chrome浏览器不支持audio和video标签的autoplay自动播放

    声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 ...

  4. html 中video标签视频不自动播放的问题

    有个需求,客户想做个打开官网自动播放一段视频,楼主使用了video标签,即下面的代码::于是我在video标签上添加了属性 autoplay=“autoplay” loop=“loop”然而通过地址栏 ...

  5. 解决audio和video在手机端无法自动播放问题

    各大浏览器都为了节省流量,做出了优化,在用户没有行为动作时(交互)不予许自动播放 <audio src="music/bg.mp3" autoplay loop contro ...

  6. 微信video和audio无法自动播放解决方案

    //音频,写法一<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio> // ...

  7. video 手机全屏自动播放

    <video src="video.mp4" id="video" x-webkit-airplay="true" webkit-pl ...

  8. 在ios中微信video和audio无法自动播放解决方案

    WeixinJSBridgeReady页面初始化的时候会执行 document.addEventListener("WeixinJSBridgeReady", function ( ...

  9. html5的video标签自动播放

    概念澄清 这里的"自动播放",是指用户的视觉效果,并不一定是元素自身的自动播放. 查看相关文档后,有以下两种最简方案. 配置属性 发现有video标签有一个自动播放的属性autop ...

随机推荐

  1. KiCad 5.1.0 镜像圆弧后错位问题

    KiCad 5.1.0 镜像圆弧后错位问题 看官方回复这个问题将在 5.1.3 进行修复,因为这段时间在举行 KiCon 活动. 看到这个问题并不是非常严重,不是致命的,所以已经从 5.1.0 跳到 ...

  2. el-dialog 一些问题 局中滚动

    .el-dialog { position: absolute; top: 50%; left: 50%; margin: 0 !important; transform: translate(-50 ...

  3. shell学习（16）- 压缩和解压缩命令tar和zip

    tar命令 [root@Linux ~]# tar [-cxtzjvfpPN] 文件与目录 .... 参数: -c :建立一个压缩文件的参数指令(create 的意思): -x :解开一个压缩文件的参 ...

  4. JavaWeb登录、注销、退出、记住用户名和密码

    应该是保存在Cookie里,session是放在服务器的内存里的.在用户关闭了网页窗口后,session就清空了.而Cookie是保存在用户的IE临时文件夹中的,再次登录时,读取其中的值传给服务器. ...

  5. P4930「FJ2014集训」采药人的路径

    题目:P4930「FJ2014集训」采药人的路径 思路: 这篇不算题解,是让自己复习的,什么都没说清楚. 很久没有写点分治了,以前为了赶课件学的太急,板子都没打对就照着题解写题,导致学得很不扎实. 这 ...

  6. python 列表长度

  7. Mysql 数据库优化(一)

    一 避免网页访问错误 1  数据库连接timeout产生页面5xx错误 2 慢查询造成页面无法加载 3 阻塞造成数据无法提交 二 增加数据库的稳定性 三 优化用户体验 1 流畅的页面访问速度 2 良好 ...

  8. 如何安装 btsync

    本文告诉大家如何在 windows 和 Linux 安装使用 Btsync 而且分享一些小东西给大家 btsync 是分布式网盘 在这高速运作的信息化时代,使用云端来衔接工作和生活的点滴已是寻常事.可 ...

  9. 【hiho一下 第147周】小Hi的烦恼

    [题目链接]:http://hihocoder.com/contest/hiho147/problem/1 [题意] [题解] bitset的应用; 设better[j][i]表示第j个科目排名为1. ...

  10. 理解虚拟主机与VPS，云服务器CVM与云服务器ECS的区别

    1.理解虚拟主机与VPS的区别:VPS与虚拟主机的区别 2.理解云服务器CVM与云服务器ECS的区别:云服务器CVM与云服务器ECS的区别 3.锐速安装一键包