Powered by md-Blog  文 - 篇  访客 -

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


  分类:md-Blog教程  / 
更新:2020-07-02 15:01:47  /  创建:2025-05-24 11:03:28
不要删除

媒体标签

本博客系统,为避免和正常的 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>http://m10.music.126.net/20200508160923/a2ebdd0e073c7356aa5219943a5bf1be/ymusic/1c3c/b368/490e/375a0b1996f1c3cd02e7d19350574ad8.mp3</md-audio>

<md--audio>`http://m10.music.126.net/20200508160923/a2ebdd0e073c7356aa5219943a5bf1be/ymusic/1c3c/b368/490e/375a0b1996f1c3cd02e7d19350574ad8.mp3`</md--audio>

音频 API

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

音频地址

音频循环播放

参数:loop

音频自动播放

参数:auto

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


不要删除

小站不易,感谢支持!