尚硅谷HTML5&CSS3 前端学习笔记04_内联框架_音视频

最新推荐文章于 2024-09-27 20:28:31 发布

KarinAu

最新推荐文章于 2024-09-27 20:28:31 发布

阅读量125

点赞数 1

分类专栏：前端文章标签： html5 css3

本文链接：https://blog.csdn.net/KarinAu/article/details/118441408

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

内联框架

向网页中引入其他网页

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">

    <title>Document</title>
</head>
<body>

    <!--
        内联框架，用于向当前页面中引入一个其他页面
            src指定要引入的网页的路径
            frameborder 指定内联框架的边框
    -->

    <iframe src="http://qq.com" width="800" height="600" frameborder="0"></iframe>
    <h1>hello</h1>

    
</body>
</html>

音视频

对本地服务器没有压力，直接去其他网页中点分享代码地址，复制到页面中。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <!--
        audio标签用来向页面中引入一个外部的音频文件
            音视频文件引入时，默认情况下不允许用户自己控制播放停止

        属性：
            controls 是否允许用户播放，有就允许，没有就不允许
            autoplay音频文件是否自动播放
                -如果设置了autoplay 则音乐在打开页面时会自动播放
                    但是目前来讲大部分浏览器都不会自动对音乐进行播放
            loop 音乐是否循环播放
        
    -->
    
    <audio src="./source/Skylar Grey - Everything I Need (歌词版).mp4" controls loop></audio>
   <audio src="./source/Skylar Grey - Everything I Need.ncm" controls></audio>
   <!--
       除了通过src指定外部文件的路径外，还可以通过source来指定文件路径
       正常浏览器用src，不正常浏览器用embed
   -->

   <audio controls>
       对不起，您的浏览器不支持播放音频！
       <source src="./source/Skylar Grey - Everything I Need (歌词版).mp4"> 
       <embed src="./source/Skylar Grey - Everything I Need (歌词版).mp4" type="audio/mp4" width="300" height="100">
   </audio>
   <!--
       使用video标签来向网页中引入视频文件
            -使用方式和audio基本上是一样的
   -->
   <video src="./source/Skylar Grey - Everything I Need (歌词版).mp4" controls></video>
   <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=q0039ysdma8" allowFullScreen="true"></iframe>
  
</body>
</html>