Powered by md-Blog  文 - 篇  访客 -

md-Blog 为博客添加视频音频


  分类:md-Blog教程  / 
更新:2020-05-08 16:47:37  /  创建:2020-05-08 16:25:09
不要删除

媒体标签

本博客系统,为避免和正常的 HTML5 音、视频标签 <video><audio> 重复,影响 HTML5 技术内容展示。顾在标签前加入 md- 进行实现。

  • 注意:使用示例时请将示例中的 -- 替换成 -

视频演示

横屏演示

示例:将 -- 替换成 -

<md-video>media/taiyuan.mp4</md-video>

<md--video>media/taiyuan.mp4</md--video>

竖屏演示,设置宽度为 30%

示例:将 -- 替换成 -

<md-video>media/demo.mp4, 30</md-video>

<md--video>media/demo.mp4, 30</md--video>

远程视频演示

示例:将 -- 替换成 -

<md-video>http://vjs.zencdn.net/v/oceans.mp4</md-video>

<md--video>`http://vjs.zencdn.net/v/oceans.mp4`</md--video>

视频 API

参数:<标签>[视频地址, 视频宽度, 自动播放]</标签>

视频地址

视频宽度

视频宽度为 1-100 之间的数字。
  • 60:表示 60% 的宽度。
  • 在移动设备,为增强体验,视频宽度拉伸为 100%,您也可以在 blog.css 文件中进行修改。

视频自动播放

参数:auto

由于大多数浏览器禁用自动播放功能,开启前请确认您的浏览器是否禁用该功能。

音频演示

aac 音频演示,循环播放

牛歌 / 小草 - 相伴一生.acc

示例:将 -- 替换成 -

<md-audio>media/相伴一生.aac, loop</md-audio>

<md--audio>media/相伴一生.aac, loop</md--audio>

mp3 音频演示

Katie Herzig - Forevermore.mp3

示例:将 -- 替换成 -

<md-audio>media/Forevermore.mp3</md-audio>

<md--audio>media/Forevermore.mp3</md--audio>

远程音频演示

黄超 - 只要平凡 (中国“疫”线疾控人系列专题纪录片主题片尾曲).mp3

示例:将 -- 替换成 -,中国加油!!!

<md-audio>https://96.f.1ting.com/5eb51c08/b3f738612f2f09e584a34f769410dec9/2020/04/28/28a_Huang/01.mp3</md-audio>

<md--audio>`https://96.f.1ting.com/5eb51c08/b3f738612f2f09e584a34f769410dec9/2020/04/28/28a_Huang/01.mp3`</md--audio>

音频 API

参数:<标签>[音频地址, 循环, 自动播放]</标签>

音频地址

音频循环播放

参数:loop

音频自动播放

参数:auto

由于大多数浏览器禁用自动播放功能,开启前请确认您的浏览器是否禁用该功能。


不要删除

小站不易,感谢支持!