网页添加音乐和视频

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

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

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