白文学_20210111-窦之鹏

知识总结

上午:了解了HTML的发展和H5,复习了html的标签和一些知识点

下午:a标签的锚点和音视频播放,图片和复习css

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

​ audio 音频标签
​ controls 控制按钮
​ autoplay 自动播放 chrome 在65之后禁止音/视频自动播放
​ muted 静音
​ preload 加载
​ auto 自动 默认
​ none 不预加载
​ metadata 预加载
​ loop 循环播放

​ video 视频控件
​ controls 控制按钮
​ poster 视频封面
​ (其他 audio 标签属性也生效)

滚动字幕

<script type="text/javascript">
            // 获取 视频 元素
            var video = document.querySelector("#video");
            // 获取到 播放 按钮
            var btn = document.querySelector("#btn");
            
            // 定义一个函数
            function play(){
                // 向控制台输出
                // console.log(video);
                // 获取视频是否暂停
                var videoStatus = video.paused;
                
                
                if(videoStatus){
                    // 如果是暂停的,就播放
                    video.play();
                    // 修改按钮文字
                    btn.innerText = '暂停';
                    
                    // video.muted = true; 静音 video.volume = (0~1) 音量
                }else{
                    // 如果是暂停的,就暂停
                    video.pause();
                    // 修改按钮文字
                    btn.innerText = '播放';
                }
                
            }
            
            
            function listen(e){
                var code = e.keyCode;
                // 判断 如果是 空格或者 回车按钮 调用 play()
                if (code == 32 || code == 13) {
                    play();
                }
                
            }
            
            // 添加监听事件
            window.addEventListener("keydown", listen, false);
        </script>

心得体会

长时间没有用过前端,前端的知识点都忘记了,还需要花时间去复习一下前面的知识。基础知识巩固好,才能更好的衔接以后新学的知识点,不然,如果前面的知识没巩固好,后面学习新知识的时候就会有点困难。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1