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. 2018-2-13-win10-uwp-获取按钮鼠标左键按下

    title author date CreateTime categories win10 uwp 获取按钮鼠标左键按下 lindexi 2018-2-13 17:23:3 +0800 2018-2- ...

  2. 通过 PHP OPcache 提升 Laravel 应用运行速度

    什么是 OPcache 每一次执行 PHP 脚本的时候,该脚本都需要被编译成字节码,而 OPcache 可以对该字节码进行缓存,这样,下次请求同一个脚本的时候,该脚本就不需要重新编译,这极大节省了脚本 ...

  3. Oracle错误——引发ORA-01843:无效的月份。

    问题 引发ORA-01843:无效的月份. 解决 改动client会话日期的语言: ALTER SESSION SET nls_date_language='american';

  4. java基础部分的一些有意思的东西。

    ${li.key!=''&&li.key!= null}可以直接判断不为空 ${empty li.value}也是不为空. 最近好烦迭代map里的map或者map里的list 后来发现 ...

  5. 从零学React Native之05混合开发

    本篇文章,我们主要讨论如何实现Android平台的混合开发. RN给Android端发送消息 首先打开Android Studio, Open工程, 在React Native项目目录下选择andro ...

  6. Careers/Staffing Index

    Careers/Staffing Index     Not having data governance can hurt your business. Download this eBook to ...

  7. laravel 定时任务通过队列发送邮件

    https://www.jianshu.com/p/f6b94596098e 关于laravel发送邮件,请先参考我的另一片文章:laravel sendcloud发送邮件,再继续往下看. 1.用da ...

  8. oracle使用TKPROF 工具来查询SQL性能状态

    SQL trace 工具收集正在执行的SQL的性能状态数据并记录到一个跟踪文件中. 这个跟踪文件提供了许多有用的信息,例如解析次数.执行次数,CPU使用时间等.这些数据将可以用来优化你的系统. 设置S ...

  9. <STL源码剖析> 6.3.6 power

    计算power的算法说明 http://www.sxt.cn/u/324/blog/2112 翻译自  http://videlalvaro.github.io/2014/03/the-power-a ...

  10. 解析XML内容到User对象

    users.xml <?xml version="1.0" encoding="UTF-8"?> <xml-root> <conn ...