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. hdu3549 最大流

    #include<stdio.h> #include<string.h> #include<queue> #define MAXN 1010 using names ...

  2. 【转】Sprague-Grundy函数

    http://www.cnitblog.com/weiweibbs/articles/42735.html 上一期的文章里我们仔细研究了Nim游戏,并且了解了找出必胜策略的方法.但如果把Nim的规则略 ...

  3. hdu2041 dp

    #include<stdio.h> int main() { int i,t,n; ]; dp[]=; dp[]=; dp[]=; ;i<=;i++) dp[i]=dp[i-]+dp ...

  4. Libevent：6辅助函数以及类型

    在头文件<event2/util.h>中定义了许多有用的函数和类型来帮助实现可移植的程序.Libevent在内部使用这些类型和函数. 一:基本类型 evutil_socket_t 除了Wi ...

  5. jquery 即点即改

    //在html中建立表单. <table border=""> <th>编号</th> <th>用户名</th> < ...

  6. Python copy(), deepcopy()

    copy() 浅拷贝: 创建一组拷贝对象的引用.切片操作相当于浅拷贝,会生成一个新的对象,新的对象里保存原对象的引用. 如果原对象中的可变对象改变(list),那么浅拷贝的对象随之改变,如果原对象中不 ...

  7. SQLServer一条SQL查出当月的每一天

    from master..spt_values ),,),'2013-02-03')+'-01' as datetime)) 结果: 返回带有年月日的日期 ),),) AS datetime) fro ...

  8. 洛谷P3366 【模板】最小生成树(kuskal)

    #include<bits/stdc++.h> using namespace std; ; ; struct node{ int cnt,fa; }f[maxn]; inline voi ...

  9. 2019-1-29-Moq基础-判断方法被执行

    title author date CreateTime categories Moq基础 判断方法被执行 lindexi 2019-01-29 16:29:57 +0800 2019-01-17 1 ...

  10. PHP 网站大流量与高并发的解决方法

    php 网站如何应对大流量与高并发呢? 首先,确认服务器硬件是否足够支持当前的流量. 普通的P4服务器一般最多能支持每天10万地理IP,如果访问量比这个还要大,则请配置一台更高性能的专用服务器. 否则 ...