html5视频播放原理,HTML5 - 使用JavaScript控制video视频播放（自定义视频播放器）...

2024-04-26 01:03:14

下面不使用的controls属性，通过创建一个自定义播放器演示如何使用js操作元素。

效果图如下：

实现功能如下：

(1)可以播放，暂停，停止视频。

(2)可以改变播放速度(2倍速度加速播放，一半的速度慢速播放，正常速度播放)

(3)播放时有进度条，同时还能显示已播放时间。

代码如下：

hangge.com

#durationBar{

border:solid 1px #164900;

width:100%;

margin-bottom:5px;

}

#positionBar{

height:20px;

color:white;

font-weight:bold;

background:#2D9900;

text-align:center;

}

//播放

function play(){

var video = document.getElementById("videoPlayer");

video.play();

}

//暂停

function pause(){

var video = document.getElementById("videoPlayer");

video.pause();

}

//停止

function stop(){

var video = document.getElementById("videoPlayer");

video.pause();

video.currentTime = 0;

}

//快放

function speedUp(){

var video = document.getElementById("videoPlayer");

video.play();

video.playbackRate = 2;

}

//慢放

function slowDown(){

var video = document.getElementById("videoPlayer");

video.play();

video.playbackRate = 0.5;

}

//正常速度

function normalSpeed(){

var video = document.getElementById("videoPlayer");

video.play();

video.playbackRate = 1;

}

//进度条相关

function progressUpdate(){

var video = document.getElementById("videoPlayer");

//动态设置进度条

var postionBar = document.getElementById("positionBar");

postionBar.style.width = (video.currentTime / video.duration * 100) + "%";

//设置播放时间

displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) + "秒";

}

οntimeupdate="progressUpdate()">

0秒

播放

暂停

停止

快放

慢放

正常

html5视频播放原理,HTML5 - 使用JavaScript控制video视频播放（自定义视频播放器）...相关推荐

html5拖放原理,HTML5 拖放实现
对于拖拽我们并不陌生,尤其是在 HTML5 支持拖拽后,让这一切变的更加容易了.本文旨在探讨 H5 拖拽方案.实现步骤,以及相关原理. 一.我理解的拖拽为了更好的说明,这里我强行分类,大致如下: 操 ...
html5 app 原理,html5打包成app应用的原理是什么？
慕侠2389804 NativeScript我用过,其他听过但是没用过,但我觉的原理应该差不多,简单给你说说ns的原理.如果你使用过ns的话,你会发现其实和开发Angularwebapp基本没什么区别 ...
用javascript控制调用media player播放器例子
注:此范例转子红叶的blog: http://blog.csdn.net/redleaf1995/archive/2008/03/12/2174122.aspx 此范例界面较为简单,支持播放列表 . ...
用javascript控制调用media player播放器例子[转]
此范例界面较为简单,支持播放列表 .建立播放列表的步骤为: 1)在文本框中输入媒体资源的地址,可以是HTTP地址,相对地址和绝对地址 2)点击"添加到媒体列表"按钮,将媒体资源信息 ...
HTML5使用JavaScript控制＜audio音频的播放
1,下面是一个播放音乐的最简单样例 (controls属性告诉浏览器要有基本播放控件) 原文:HTML5 - 使用<audio>播放音频 <audio src="hangg ...
HTML5 自定义视频播放器
HTML5 自定义视频播放器第一步:获取播放器第二步:实现播放与暂停第三步:实现全屏操作第四步:实现播放的逻辑第五步:实现播放过程的逻辑第六步:实现视频的跳播第七步:播放完毕后重置播放器 ...
HTML5 音频视频的使用以及自定义播放器
一.音频 audio:音频 src:播放的音频文件的路径 controls:音频播放器的控制面板 autoplay:自动播放 loop:循环 <audio src="../mp3/xx ...
[WCF权限控制]利用WCF自定义授权模式提供当前Principal[原理篇]
在<通过扩展自行实现服务授权>一文中,我通过自定义CallContextInitializer的方式在操作方法之前之前根据认证用户设置了当前线程的安全主体,从而实现授权的目的.实际上,WC ...
[WCF权限控制]利用WCF自定义授权模式提供当前Principal[实例篇]
在<原理篇>中我们谈到:如果采用自定义安全主体权限模式,我们可以通过自定义AuthorizationPolicy或者ServiceAuthorizationManager实现对基于当前认证 ...

最新文章

热门文章