APP下载

HTML5自制网页视频播放器的实现

2017-06-02纪翠竹

数字技术与应用 2017年4期
关键词:视频播放器

纪翠竹

摘要:本文利用HTML5的

关键词:HTML5;富媒体;视频;播放器;JavaScript

中图分类号:TP393 文献标识码:A 文章编号:1007-9416(2017)04-0195-01

大数据时代,富媒体元素早已突破了传输的瓶颈,成为互联网的重要组成部分。本文从提升用户体验出发,兼顾各浏览器对视频文件的支持情况,介绍基于HTML5的自定义控制栏的视频播放器技术的应用。

1

2 HTML DOM Video对象

HTML5为Video对象提供了用于DOM操作的方法、属性和事件,下面,我们用一个简单的例子说明一下如何使用JavaScript代码操作Video对象。如图1所示,定义了一个用于控制播放或暂停的按钮,然后为该按钮的onclick事件定义方法playPause(),使用JavaScript的条件语句进行状态的判断,当该播放器的状态为暂停时调用play()方法,切换为播放,这个按钮是个反复键,在播放或暂停状态下进行切换。

3 网页的部分

该页面由一个

猜你喜欢

视频播放器
Walkman诞生40周年 索尼适时发布NW-ZX500和NW-A100系列播放器
基于STM32的MP3播放器设计
Moon ACE播放器/放大器一体机
播放器背板注塑模具设计