HTML5技术

HTML5 video标签实现视频播放 - 风雨后见彩虹

字号+ 作者:风雨后见彩虹 来源:博客园 2015-09-25 09:10 我要评论( )

随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签。 下面先介绍下video标签的一般用法 video标签的属性如下: 注:control 属性供添加播放、暂停和音量控件。 一般用法: 当然可以暂停,播放该视频,使用方法如下: functi

随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签。

下面先介绍下video标签的一般用法

video标签的属性如下:

注:control 属性供添加播放、暂停和音量控件。

一般用法:

  

当然可以暂停,播放该视频,使用方法如下:

function playPause() { var myVideo = document.getElementById('videoP'); if (myVideo.paused){ myVideo.play(); }else{ myVideo.pause(); } }

 

当然video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:

如下:

 Your browser does not support the video tag.

 

再介绍下音频标签audio的使用(跟video的使用都一样):

亲 您的浏览器不支持html5的audio标签

audio不单单是个标签 他也是window下的一个对象,对象就有属性和方法,作为对象他有哪些常用的方法呢
对象属性:
currentTime 获取当前播放时间
duration 获取歌曲的总时间
play 是否在播放 返回true/false
pause 是否暂停 返回true/false


对象方法:
play() 播放歌曲
pause() 暂停歌曲
load()重新加载歌曲

再如下面:

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • HTML5 进阶系列:indexedDB 数据库 - _林鑫

    HTML5 进阶系列:indexedDB 数据库 - _林鑫

    2017-04-27 14:02

  • HTML5 高级系列:web Storage - _林鑫

    HTML5 高级系列:web Storage - _林鑫

    2017-04-27 14:01

  • 移动前端常用meta标签 - 0jiji0

    移动前端常用meta标签 - 0jiji0

    2017-04-21 12:00

网友点评
H