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. controller接收前台数据—中文乱码问题

    项目用的开发环境为tomcat+eclipse+SSM 正如题目,controller接收前台数据-中文乱码问题,在页面编码为UTF-8的前提下,解决方案有二: 一) controller接收数据时, ...

  2. JAVA中this的三种用法的详解

    this关键字必须放在非静态方法里面 this关键字代表自身,在程序中主要的使用用途有以下几个方面: ? 使用this关键字引用成员变量 ? 使用this关键字在自身构造方法内部引用其它构造方法 ? ...

  3. ADO.NET sqlHelper类（DBHelper类）

    1.配置文件 <connectionStrings> <add name="constr" connectionString="Data Source= ...

  4. spring data jpa 原生sql 别名字段无法注入

    开发四年只会写业务代码,分布式高并发都不会还做程序员?->>>    在使用entityManager.createNativeQuery(sql,User.class)这个方法时, ...

  5. @bzoj - 4378@ [POI2015] Logistyka

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 维护一个长度为 n 的序列,一开始都是 0,支持以下两种操作: ...

  6. poj1741 树上距离小于等于k的对数 点分治 入门题

    #include <iostream> #include <stdio.h> #include <string.h> #include <algorithm& ...

  7. Libev源码分析09：select突破处理描述符个数的限制

    众所周知,Linux下的多路复用函数select采用描述符集表示处理的描述符.描述符集的大小就是它所能处理的最大描述符限制.通常情况下该值为1024,等同于每个进程所能打开的描述符个数. 增大描述符集 ...

  8. PHPstorm相关设置以及快捷键

    转自:http://blog.csdn.net/fenglailea/article/details/12166617 1.界面中文方框问题 Settings->Appearance中Theme ...

  9. php 使用正则匹配中文 返回结果

    $str = 'eg5455正则匹配中文123三国杀'; $patten='/[\x{4e00}-\x{9fa5}]+/u'; $a = preg_match($patten, $str, $mn); ...

  10. pytorch中如何处理RNN输入变长序列padding

    一.为什么RNN需要处理变长输入 假设我们有情感分析的例子,对每句话进行一个感情级别的分类,主体流程大概是下图所示: 思路比较简单,但是当我们进行batch个训练数据一起计算的时候,我们会遇到多个训练 ...