在博客HTML页面中插入音频/视频

2018-05-30T15:27:00

网页添加音乐和视频

如果你想让我们的博客或其它网站个性化一点,或者需要放个展示框演示:比如上个音乐,放个视频、动画等等。。。。。。
那么这篇文章或许会对你有帮助。

咱们以本站为例,在本站的此页面中添加音乐和视频。


1.添加音乐:

1.1添加网络音乐

咱们以网易云音乐为例。Web网页端网易云音乐中每首歌曲都会显示一个外链生成器链接,咱们可以直接点击生成器,复制自己需要类型的代码,然后粘贴在自己的网站想要显示的地方就可以了。如下所示:

<!-- 这是复制网易云外链生成器的代码 -->
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=420
height=86 src="//music.163.com/outchain/player?type=2&id=1325559299&auto=0&height=66">
</iframe>

展示样式:

其它音乐网站操作也大同小异。

1.2添加本地音乐

添加本地音乐文件,咱可以用HTML5标签中的audio音频标签来完成。为了更好的浏览器兼容性,音频文件最好是MP3格式的。

<audio controls="controls">
  <source src="链接路径/xxx.mp3" type="audio/mpeg">
</audio>

audio标签的使用方法

Internet Explorer 8 不支持 audio 元素。在 IE 9 中,将提供对 audio 元素的支持。


2.添加视频/动画

2.1添加网络视频

同样的,音乐可以生成外链,那么视频当然也可以的。咱们以B站为例:
打开B站,选中你想添加的视频,在视频下方的分享中,复制嵌入代码,然后粘贴在你的网站想要显示的地方。

<!-- 这是复制来自B站的外链代码 -->
<iframe src="//player.bilibili.com/player.html?aid=51719607&cid=90540383&page=1" 
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> 
</iframe>

展示效果:

在本页面视频窗口尺寸大小是因为我的网站主题原因所致,因为我懒得升级 φ( ̄∇ ̄o)

其它网站操作都大同小异。
关于iframe标签的使用详解请参考:http://www.w3school.com.cn/tags/tag_iframe.asp

2.2添加本地视频

你可以把视频在网站的根目录或指定目录,比如我上传到根目录abc.MP4。
然后用HTML5标签中的video视频标签来添加。代码所示:

<video style="width: 100%; height: 100%; object-fit: fill"  preload="none" controls="controls"  autoplay="autoplay">
<source src="https://geek0ne.com/abc.mp4">
</video>

上面代码已经兼容移动端视频自适应窗口

关于Video标签中属性详解请移步:http://www.w3school.com.cn/tags/tag_video.asp

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »