HTML5 音频与视频

8-05 1,556 views

audio(音频):
• 直到现在,仍然不存在一项旨在网页上播放音频的标准。
• 今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览
器都拥有同样的插件。
• HTML5 规定了在网页上嵌入音频元素的标准,即使用

属性:
• controls 显示控制条
• loop 循环播放
• autoplay 自动播放

实例:

<body>
    <audio controls="controls" loop="loop" autoplay="autoplay">
        <source src="music.mp3" />
        <source src="music.ogg" /> 
        你的浏览器不支持audio标签
    </audio>
</body>

video (视频):
属性:
• controls 显示控制条
• loop 循环播放
• autoplay 自动播放
• poster 视频封面
• width/height 宽度/高度

实例:

<body>
    <video controls="controls" width="750" id="video" poster="./mp4.jpg">
        <source src="mp4.mp4" />
    </video>
</body>

方法:
• Media.currentSrc 返回当前资源的URL
• Media.src = value 返回或设置当前资源的URL
• Media.currentTime = value 当前播放的位置,赋值可改变位置
• Media.duration 当前资源长度 流返回无限
• Media.paused 是否暂停
• Media.played 返回已经播放的区域
• Media.ended 是否结束
• Media.autoPlay 是否自动播放
• Media.loop 是否循环播放
• Media.play() 播放
• Media.pause() 暂停
• Media.volume= value 音量
• Media.muted = value 静音

自动生成twitter、facebook、whatsapp等等分享图标 Sharingbuttons

分享一个好用的第三方分享图标工具,支持主流外国网站 github:click me 使用方法 打开网址 https://sharingbuttons.io/ 按照自己想要的分享按钮,生成代码和c...

阅读全文

css画透明渐变背景图

参考 https://www.cnblogs.com/limeiky/p/6519452.html 效果图 代码 div { background-image: linear-gradient( to bottom, rgba(255...

阅读全文

bootstrap 导航下拉菜单鼠标滑过显示隐藏

参考:https://bootsnipp.com/snippets/Vm7d 效果 CSS body { margin: 30px 0px; } .navbar-default .navbar-nav > li.dropdown:hover > a, .n...

阅读全文

欢迎留言