美文网首页
第4章 HTML5多媒体实现网站“家庭影院”

第4章 HTML5多媒体实现网站“家庭影院”

作者: 夜远曦白 | 来源:发表于2021-08-13 10:42 被阅读0次

带着问题去看书学习啦~

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

相关文章

  • 第4章 HTML5多媒体实现网站“家庭影院”

    带着问题去看书学习啦~ HTML5+CSS3+JavaScript Web 前端开发案例教程(慕课版),微信读书中...

  • 小羊教程——HTML5多媒体标签

    本节主要内容是HTML5的多媒体标签audio和video 直接步入正题,HTML5的多媒体标签主要有两个vide...

  • HTML5开发工程师

    1.什么是HTML5开发工程师?HTML5开发工程师是协调HTML5设计师、后端程序员实现网站页面或程序界面,优化...

  • 第二章 HTML网页和结构

    网页构成 1. 基本元素和树状结构 2. HTML5新特性 进入HTML5时代后,多媒体和2D/3D图形变成了“第...

  • HTML入门--浅谈HTML和HTML5有什么区别?

    1.首先讨论什么是HTML5? 首先,HTML5是最新的HTML标准,HTML5拥有新的语义、图形以及多媒体...

  • html5常见问题

    1.什么是html5 HTML5是最新的HTML标准。 设计目的 HTML5的设计目的是为了在移动设备上支持多媒体...

  • HTML5 & CSS3

    HTML5 解析超文本语言第5次 重大修改完成时间2014/10/29设计目的为了在移动设备上支持多媒体 新增特性...

  • 第二期分享 | WebSocket+MSE——HTML5直播技术

    分享 | 刘博(又拍云多媒体开发工程师) 又小拍:如何实现HTML5直播技术是直播创业团队一直想要攻克的难题。12...

  • 前端面试

    一、html5: html5是html4的升级版本,设计的目的是为了在移动设备上支持多媒体。 html5引入了新的...

  • 10分钟带你了解HTML5

    你需要知道的 何为HTML5 ☞HTML5属于上一代HTML的新迭代语言,设计HTML5主要的目的也是为了让多媒体...

网友评论

      本文标题:第4章 HTML5多媒体实现网站“家庭影院”

      本文链接:https://www.haomeiwen.com/subject/vimcbltx.html