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. 【NS2】用eclipse调试NS2（转载）

    相信很多喜欢Java的人对eclipse都情有独钟.NS2程序的调试,可以用打印命令调试,这样太繁琐.也可以用gdb调试,个人觉得上手比较困难.相信各位学习NS2的新手,在看代码的时候,很多的函数或者 ...

  2. 一维数组的求平均成绩 Day06

    package com.sxt.arraytest1; /* * 求班里学生的平均成绩,以及成绩的综合 输出每个同学的成绩 */ import java.util.Arrays; import jav ...

  3. *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '[<_UIFeedbackParameters 0x1d4442e50> setNilValueForKey]: could not set nil as the value for the key rate.'

    *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '[<_UIFeedbac ...

  4. 从零学React Native之02状态机

    本篇文章首发于简书 欢迎关注 之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 本篇文章主要介绍下下面的知识: 1.简单界面的搭 ...

  5. @codeforces - 414E@ Mashmokh's Designed Problem

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一棵 n 个点的树,每个点的儿子是有序的. 现给定 m 次操 ...

  6. Jquery常用方法汇总(转)

    https://blog.csdn.net/lucky___star/article/details/87883888

  7. AtCoder Beginner Contest 077 C Snuke Festival(二分)

    二分水题,A,B,C三个数组排序,对于每个B[i],二分算出来有多少A比他小,多少C比他大,然后扫一遍出结果.O(nlog(n))水过. #include <bits/stdc++.h> ...

  8. yeoman&bower

    一.Yeoman 在nodejs环境下安装: npm install -g yo 然后安装所需要的generator,generator是npm包,命名为generator-xyz,比如安装angul ...

  9. jq实现简单手风琴效果

    文章地址:https://www.cnblogs.com/sandraryan/ 利用slideUp slideDown动画 <!DOCTYPE html> <html lang=& ...

  10. H3C MAC地址