zoukankan      html  css  js  c++  java
  • video实现有声音自动播放

    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;
             1400px;
        }
        .demo1{
             700px;
            height: 500px;
            float: left;
        }
        .demo1 video{
            height: 400px;
             400px;
        }
        .demo2{
             700px;
            height: 500px;
            float: left;
        }
        .demo2 video{
            height: 400px;
             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>
    
  • 相关阅读:
    PAT B1027 打印沙漏 (20 分)
    PAT B1025 反转链表 (25 分)
    PAT B1022 D进制的A+B (20 分)
    PAT B1018 锤子剪刀布 (20 分)
    PAT B1017 A除以B (20 分)
    PAT B1015 德才论 (25 分)
    PAT B1013 数素数 (20 分)
    PAT B1010 一元多项式求导 (25 分)
    HDU 1405 The Last Practice
    HDU 1165 Eddy's research II
  • 原文地址:https://www.cnblogs.com/shapaozi/p/11405315.html
Copyright © 2011-2022 走看看