2020-07-19 html的video在手机端自动播放 + css的2张图片叠加 + JS的隐式全局变量和外部函数作用域 + 软技能的前端配置文件管理

2020-07-19 题目来源：http://www.h-camel.com/index.html

[html] HTML5的video在手机端如何实现进来页面时就自动播放？

在网页中，想要设置视频自动播放，可以在video标签中添加autoplay属性；但是chrome从18年起不会支持。所以，需要添加静音才能自动播放。
<video muted src="" autoplay loop></video>
但是这样没有声音怎么办？
浏览器设置中开启音频权限。

移动端播放，解决方法： https://blog.csdn.net/PY0312/article/details/90349386
1. 用户手动触发
<audio autoplay="autopaly" loop="loop" controls="controls" id="audios">
    <source src="music/bg.mp3" type="audio/mp3" />
</audio>
2. 创建页面监听，页面加载完成后自动触发
<audio autoplay="autopaly" loop="loop" id="audios">
    <source src="music/bg.mp3" type="audio/mp3" />
</audio>

<script>
// 将以下代码添加到js入口函数内即可
// 这里使用了微信自带的WeixinJSBridgeReady事件
document.addEventListener('WeixinJSBridgeReady', function() {
    document.getElementById('audios').play()
})

</script>
3. 创建触摸监听，通过触摸事件来触发播放事件
<audio autoplay="autopaly" loop="loop" id="audios">
    <source src="music/bg.mp3" type="audio/mp3" />
</audio>

<script>
// 将以下代码添加到js入口函数内即可
document.addEventListener('touchstart', function() {
    document.getElementById('audios').play()
})

</script>

[css] 如何使两张图片叠加？

这是布局问题吧，设置position属性，外层为relative，内层为absolute
<div style="position:relative">

                 

[js] 解释下隐式全局变量和外部函数作用域

作用域和全局变量:

页面加载时，创建window全局对象，并生成全局作用域，然后执行上下文，进行预解析，做函数提升和变量提升，生成全局变量对象。

隐式全局变量：隐藏的全局变量，不易被发现

function  fn（）{
    var  a  =  b  =  c  =  1;   // b和c就是隐式全局变量
}
注意:
function  fn（）{
    var  a  =  b  =  c  =  1;   // b和c就是隐式全局变量（等号）
    var  a = 1;  b = 2;  c = 3;     // b和c就是隐式全局变量（分号）
    var  a = 1 ,  b = 2 ,  c = 3;    // b和c就不是隐式全局变量（逗号）
}

外部函数作用域：外部作用域是相对于当前作用域而言的，一般指外部函数中的变量作用域。在执行一个函数时会引用其他函数中的变量，一般通过闭包来实现调用，原因是隐藏和保护外部作用域执行上下文。

[软技能] 你是如何管理前端配置文件的

前端配置文件格式及选择：https://blog.csdn.net/LLLCSDN/article/details/104777128