欢迎来到我的网上家园,谢谢关心和支持!

如何在网页中插入声音文件和视频

2019-04-06 09:31:57 网页制作 插入
HTML5强大之处就是能支持多媒体文件。在一些网页中,我们或多或少需要添加一些音乐增加网页的生动性,例如背景音乐。那我们怎么做才能向网页中添加音频文件呢?
在HTML5中,是可以支持定义audio的,支持的声音格式有ogg,mp3和wav。要将一个音频文件插入到网页中,我们可以这样做。
首先定义一个audio
例如:
<audio src="audio/校长 - 带你去旅行.mp3" autoplay="autoplay"></audio>
其实这样已经可以播放出音频文件了。
但是我们发现,没有播放的控件,我们根本就看不到,也控制不了它的播放。所以,我们在这里可以给它添加一个播放控件。
我们稍微修改下代码,如下:
<audio src="audio/校长 - 带你去旅行.mp3"  controls="controls"></audio>
现在我们就可以实现播放控制了。

在HTML5之前,如果想在网页上播放视频需要用Flsh插件,不过flsh插件的性能很不稳定,这样会带来很多问题,甚至还会让浏览器崩溃。所以现在我们在网站上很少用Flsh插件来播放视频了,主要使用HTML5中的video标签。今天我们就来看看video标签是如何使用的?
我们在<body></boddy>标签之间把video标签写进去,如:<video src="这里写视频地址" width="800" height="600"></video>
我们打开网页可以发现,此时的视频并没有播放,只是一个静止的画面,怎样点击都没有反应,这是因为我们没有添加播放控件的原因。
我们在video标签里面添加播放控件,也就是controls ,这时我们发现,视频的正下方多了个进度条,我们可以点击播放试试。此时可以正常播放了。<video src="这里写视频地址" width="800" height="600" controls></video>
如果我们想让视频在点击进网页时自动播放,可以添加一个autoplay,autoplay代表自动播放的意思。。<video src="这里写视频地址" width="800" height="600" controls autoplay></video>
各大浏览器对video中的视频格式支持不一致,比如:有些浏览器不支持mp4格式,只支持webm格式,有些则相反。为了防止意外发生,我们需要做兼容,让我们的视频在任何浏览器上都可以正常播放。
<video width="800" height="600" controls autoplay>
    <source src="这里写视频地址.webm" >
    <source src="这里写视频地址.mp4" >
    <source src="这里写视频地址.ogg" >
</video>

猜你喜欢

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表