JavaScript自定义媒体播放器

使用<audio>和<video>元素的play()和pause()方法,可以手工控制媒体文件的播放。组合使
用属性、事件和这两个方法,很容易创建一个自定义的媒体播放器,如下面的例子所示。

 1 <div class="mediaplayer">
 2     <div class="video">
 3         <video id="player" src="movie.mov" poster="mymovie.jpg"
 4         width="300" height="200">
 5         Video player not available.
 6         </video>
 7     </div>
 8     <div class="controls">
 9         <input type="button" value="Play" id="video-btn">
10         <span id="curtime">0</span>/<span id="duration">0</span>
11     </div>
12 </div>

以上基本的HTML 再加上一些JavaScript 就可以变成一个简单的视频播放器。以下就是JavaScript
代码。

 1 window.onload=function(){
 2     var player = document.getElementById("player"),
 3     oBtn = document.getElementById("video-btn"),
 4     curtime = document.getElementById("curtime"),
 5     duration = document.getElementById("duration");
 6     //更新播放时间
 7     duration.innerHTML = player.duration;
 8
 9     oBtn.onclick = function(){
10         if (player.paused){
11             player.play();
12             oBtn.value = "Pause";
13         }
14         else {
15             player.pause();
16             oBtn.value = "Play";
17         }
18     }
19     //定时更新当前时间
20     setInterval(function(){
21         curtime.innerHTML = player.currentTime;
22     }, 250);
23 }

以上JavaScript 代码给按钮添加了一个事件处理程序,单击它能让视频在暂停时播放,在播放时暂
停。通过<video>元素的load 事件处理程序,设置了加载完视频后显示播放时间。最后,设置了一个
计时器,以更新当前显示的时间。你可以进一步扩展这个视频播放器,监听更多事件,利用更多属性。
而同样的代码也可以用于<audio>元素,以创建自定义的音频播放器。

时间: 2024-10-23 22:55:11

JavaScript自定义媒体播放器的相关文章

Plyr – 简单,灵活的 HTML5 媒体播放器

Plyr 是一个简单的 HTML5 媒体播放器,包含自定义的控制选项和 WebVTT 字幕.它是只支持现代浏览器,轻量,方便和可定制的媒体播放器.还有的标题和屏幕阅读器的全面支持. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型 jQuery 图片轮播插件 本文链接:P

c#开发的媒体播放器

在Microsoft Visual C# .NET 中使用 DirectShow 控件,来开发一个媒体播放器.按照本文介绍的操作步骤,您可以创建一个简单 Visual C# 应用程序,用来播放数字音频和视频. 介绍 Microsoft Visual C# 是世界上最流行的编程语言,利用 Visual C# 的最新版本 Visual C# .NET,您能够快速.有效地开发基于 Windows 窗体的应用程序,还可以为嵌入了 Microsoft Windows Media? Player 9 Ser

使用VideoView自定义一个播放器控件

介绍 最近要使用播放器做一个简单的视频播放功能,开始学习VideoView,在横竖屏切换的时候碰到了点麻烦,不过在查阅资料后总算是解决了.在写VideoView播放视频时候定义控制的代码全写在Actvity里了,写完一看我靠代码好乱,于是就写了个自定义的播放器控件,支持指定大小,可以横竖屏切换,手动左右滑动快进快退.好了,下面开始. 效果图 效果图有点卡,我也不知道为啥..... VideoView介绍 这个是我们实现视频播放最主要的控件,详细的介绍大家百度就去看,这里介绍几个常用的方法. 用于

(原创)jQuery Media Plugin-jQuery的网页媒体播放器插件的使用心得

jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件,它支持大部分的网络多媒体播放器和多媒体格式,比如:Flash, Windows Media Player, Real Player, Quicktime, MP3,Silverlight, PDF.它根据当前的脚本配置,自动将a标签替换成div,并生成object, embed甚至是iframe代码,至于生成object还是embed,jQuery Media会根据当前平台自动判别,因此兼容性方面非常出色下面这段代

QtQuick2实现媒体播放器(界面)

这里提供一个QtQuick2实现媒体播放器(界面).供大家学习的啦~ 先看效果图:播放器启动后的界面,部分图标来自互联网. 打开媒体文件 播放文件 快捷键控制Ctrl+H: 隐藏/显示 播放栏 当鼠标悬停在一些按钮上时可以显示提示. 关于 源代码包&程序点这里下载

【转】媒体播放器三大底层架构

媒体播放工具,这里主要指视频播放,因为要面临庞大的兼容性和纷繁复杂的算法,从架构上看,能脱颖而出的体系屈指可数.大体来说业界主要有3大架构:MPC.MPlayer和VLC.这3大架构及其衍生品占领了90%的市场,凡是用户能看到的免费媒体播放软件,无一不是源自这3大架构. MPC-HC架构  MPC(Media Player Classic)和它的后续者MPC-HC应该并列而说.MPC基于DirectShow架构,是Windows系统下元祖级别的播放器.包括KMP之流 最早也就是抄来MPC的代码再

简单媒体播放器

// //  ViewController.m //  简单媒体播放器 // //  Created by 殷婷婷 on 15-6-12. //  Copyright (c) 2015年 lanou. All rights reserved. // #import "ViewController.h" #import <MediaPlayer/MediaPlayer.h> @interface ViewController () @property(nonatomic,st

媒体播放器三大底层架构

自射手影音推出以来,生活中越来越多的时间开始被代码和各种Bug-Fix淹没.埋头在田里太久,常常会在一时之间忘记身处何方.所以偶尔上来透透气,顺便将一些经验和心得与大家分享. 媒体播放工具,这里主要指视频播放,因为要面临庞大的兼容性和纷繁复杂的算法,从架构上看,能脱颖而出的体系屈指可数.大体来说业界主要有3大架构:MPC.MPlayer和VLC.这3大架构及其衍生品占领了90%的市场,凡是用户能看到的免费媒体播放软件,无一不是源自这3大架构. MPC/HC架构 MPC(Media Player

转:媒体播放器三大底层架构

媒体播放工具,这里主要指视频播放,因为要面临庞大的兼容性和纷繁复杂的算法,从架构上看,能脱颖而出的体系屈指可数.大体来说业界主要有3大架 构:MPC.MPlayer和VLC.这3大架构及其衍生品占领了90%的市场,凡是用户能看到的免费媒体播放软件,无一不是源自这3大架构.? ? MPC-HC架构? MPC(Media Player Classic)和它的后续者MPC-HC应该并列而说.MPC基于DirectShow架构,是Windows系统下元祖级别的播放器.包括KMP之流 最早也就是抄来MPC