带着问题去看书学习啦~
HTML5＋CSS3＋JavaScript Web 前端开发案例教程（慕课版），微信读书中找到的学习Web前端书籍，第4章开始啦，耶(＾－＾)V
习题
4-1 在网页中添加视频应该使用什么标签？
<video> 标签
语法：<video src="your.mp4"></video>
<video>标签的可选属性
4-2 <marquee> 标签的属性值有哪些？
- direction —— 表示文字滚动方向。（up、down、left 和 right）
- crollamount —— 表示文字滚动速度。
- behavior —— 表示文字滚动方式。
- scroll：表示循环滚动，默认效果。
- slide：只滚动一次即停止。
- alternate：来回交替进行滚动。
4-3 在网页中添加音频使用什么标签，该标签有哪些属性值？
<audio> 标签
语法：<audio src="song.mp3" controls="controls"></audio>
<audio>标签的常用属性
4-4 如何在网页中为视频添加暂停视频、重载视频等按钮？
使用 <button> 标签添加各种功能的按钮，然后给相应功能的 button 添加 onclick 点击事件，在 js 代码中先拿到 video，给 video 添加 addEventListener 监听事件，再在定义的 button 点击事件中操作 video 的暂停 or 重载。
4-5 如何实现播放音频时调用其他函数？
跟 4-4 答案类似，用 JavaScript 来捕捉事件，对事件进行处理，调用其他函数。
附：<audio> 标签的相关事件
<audio>标签的相关事件
其他
接下来当然就是照着示例练习啦！实践一下相关的东西，总是会印象深刻一点，特别是再出点错，照着写也是可能会出错的噢~ 坑多着呢，哈哈哈~
实践的部分代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo4文字弹幕</title>
<style>
*{
padding: 0;
margin: 0;
}
.cont {width: 100%;height: 100%;background-color: cornsilk;text-align:center;}
.video {width: 600px; height: 400px; display: block; clear: both; margin: 0 auto;}
.fast {padding-top: 60px;color: #000;font: normal 24px/20px "";}
.left {padding-top:20px;color: #51bcff;font: normal 20px/18px "";}
</style>
</head>
<body>
<div class="cont">
<video id="video1" class="video" src="demo.mp4" controls = "true"></video>
<marquee class="fast" direction="right" behavior="scroll"scrollamount="20">加油，我要成Android大神</marquee>
<marquee class="left" direction="left" behavior="alternate"scrollamount="10">这里是弹幕——视频通俗易懂噢</marquee>
<div>
<button onclick="play()">播放视频</button>
<button onclick="pause()">暂停视频</button>
<button onclick="load()">重载视频</button>
</div>
</div>
<script >
var video = document.getElementById("video1");
function play(){
video.play();
}
function pause(){
video.pause();
}
function load(){
video.load();
}
</script>
</body>
</html>
效果展示：
demo4
网友评论