h5 的video视频控件

h5 的video视频控件

由于html5的流行,其中的video视频的使用很流行,使得可恨的IE9也能与时俱进了。

video所支持的格式有mp4、ogg和wav三种。

例:

HTML5 Video基础标签

`

<video id="myVideo" controls    poster="video.jpg" width="640" height="320" >
  <source src="video.mp4" type="video/mp4" />
   <source src="video.wav" type="video/wav" />
   <source src="video.ogv" type="video/ogg" />
   <p>Your browser does not support the video tag.</p>
 </video>`

下面制作Video的控件controls

本人是通过jQuery来进行获取标签及相应的控件使用操作的

Video Play/Pause Controls 播放/暂停 按钮

通过jQuery来控制video的播放、暂停

jQuery代码
$(‘.btnPlay‘).on(‘click‘, function() {
    if(video[0].paused) {
       video[0].play();
     }
     else {
        video[0].pause();
     }
     return false;
 };
html代码
<div class="control">
    <a href="#" class="btnPlay">Play/Pause</a>
</div>

显示视频播放时间和持续时间

看视频肯定最好要有个时间的概念啦!!!

jQuery代码
video.on(‘loadedmetadata‘, function() {
   $(‘.duration‘).text(video[0].duration);
});

//update HTML5 video current play time
video.on(‘timeupdate‘, function() {
   $(‘.current‘).text(video[0].currentTime);
});
html代码
<div class="progressTime">
   当前播放时间: <span class="current"></span>
   总时间: <span class="duration"></span>
</div>

视频进度条

动态模拟时间

css样式
.progressBar
{
   position: relative;
   width: 100%;
   height: height:10px;
   backgroud-color: #000;
}
.timeBar
{
   position: absolute;
   top: 0;
   left: 0;
   width: 0;
   height: 100%;
   background-color: #ccc;
}
jQuery代码
//get HTML5 video time duration
video.on(‘loadedmetadata‘, function() {
   $(‘.duration‘).text(video[0].duration));
});

//update HTML5 video current play time
video.on(‘timeupdate‘, function() {
   var currentPos = video[0].currentTime; //Get currenttime
   var maxduration = video[0].duration; //Get video duration
   var percentage = 100 * currentPos / maxduration; //in %
   $(‘.timeBar‘).css(‘width‘, percentage+‘%‘);
});
var timeDrag = false;   /* Drag status */
$(‘.progressBar‘).mousedown(function(e) {
   timeDrag = true;
   updatebar(e.pageX);
});
$(document).mouseup(function(e) {
   if(timeDrag) {
      timeDrag = false;
      updatebar(e.pageX);
   }
});
$(document).mousemove(function(e) {
   if(timeDrag) {
      updatebar(e.pageX);
   }
});

//update Progress Bar control
var updatebar = function(x) {
   var progress = $(‘.progressBar‘);
   var maxduration = video[0].duration; //Video duraiton
   var position = x - progress.offset().left; //Click pos
   var percentage = 100 * position / progress.width();

   //Check within range
   if(percentage > 100) {
      percentage = 100;
   }
   if(percentage < 0) {
      percentage = 0;
   }

   //Update progress bar and video currenttime
   $(‘.timeBar‘).css(‘width‘, percentage+‘%‘);
   video[0].currentTime = maxduration * percentage / 100;
};
html代码
<div class="progressBar">
   <div class="timeBar"></div>
</div>

缓冲栏

看视频时缓冲加载了多少

样式
<style>
.progressBar {
   position: relative;
   width: 100%;
   height: height:10px;
   backgroud-color: #000;
}
.bufferBar {
   position: absolute;
   top: 0;
   left: 0;
   width: 0;
   height: 100%;
   background-color: #ccc;
}
</style>
<div class="progressBar">
   <div class="bufferBar"></div>
</div>
Html5 Video缓冲属性将返回一个对象的缓存范围.因此,我们将使用缓存数据的最后一个值.
//loop to get HTML5 video buffered data
var startBuffer = function() {
   var maxduration = video[0].duration;
   var currentBuffer = video[0].buffered.end(0);
   var percentage = 100 * currentBuffer / maxduration;
   $(‘.bufferBar‘).css(‘width‘, percentage+‘%‘);

   if(currentBuffer < maxduration) {
      setTimeout(startBuffer, 1000);
   }
};
setTimeout(startBuffer, 1000);

音量控制

当然啦!看视频肯定得调个音量哦!!!

html代码

<a href="#" class="muted" >Mute/Unmute</a>
<div class="volumeBar">
   <div class="volume"></div>
</div>
jQuery代码
//Mute/Unmute control clicked
$(‘.muted‘).click(function() {
   video[0].muted = !video[0].muted;
   return false;
});

//Volume control clicked
$(‘.volumeBar‘).on(‘mousedown‘, function(e) {
   var position = e.pageX - volume.offset().left;
   var percentage = 100 * position / volume.width();
   $(‘.volumeBar‘).css(‘width‘, percentage+‘%‘);
   video[0].volume = percentage / 100;
});

快进/快退 倒带控制

Video有个属性playbackrate来控制视屏的播放进程

html代码

<div class="control">
   <a href="#" class="ff">Fast Forward</a>
   <a href="#" class="rw">Rewind</a>
   <a href="#" class="sl">Slow Motion</a>
</div>
jQuery代码
//Fast forward control
$(‘.ff‘).on(‘click‘, function() {
   video[0].playbackrate = 3;
   return false;
});

//Rewind control
$(‘.rw‘).on(‘click‘, function() {
   video[0].playbackrate = -3;
   return false;
});

//Slow motion control
$(‘.sl‘).on(‘click‘, function() {
   video[0].playbackrate = 0.5;
   return false;
});
然而很不幸的是:FireFox不支持playbackrate属性.以及有些版本的chrome浏览器不支持负值(倒带).到目前为止,只有Safri浏览器完全支持.所以请大家注意啦!

全屏播放

jQuery代码
$(‘.fullscreen‘).on(‘click‘, function() {
   //For Webkit
   video[0].webkitEnterFullscreen();

   //For Firefox
   video[0].mozRequestFullScreen();

   return false;
});

开灯关灯控制

jQuery代码
$(‘.btnLight‘).click(function() {
   if($(this).hasClass(‘on‘)) {
      $(this).removeClass(‘on‘);
      $(‘body‘).append(‘<div class="overlay"></div>‘);
      $(‘.overlay‘).css({
         ‘position‘:‘absolute‘,
         ‘width‘:100+‘%‘,
         ‘height‘:$(document).height(),
         ‘background‘:‘#000‘,
         ‘opacity‘:0.9,
         ‘top‘:0,
         ‘left‘:0,
         ‘z-index‘:999
      });
      $(‘#myVideo‘).css({
         ‘z-index‘:1000
      });
   }
   else {
      $(this).addClass(‘on‘);
      $(‘.overlay‘).remove();
   }
   return false;
});

好了!终于给整的差不多了!!!

原文地址:https://www.cnblogs.com/Firesun/p/10127158.html

时间: 2024-11-05 14:42:05

h5 的video视频控件的相关文章

H5 video自定义视频控件

1.自定义效果截图 2.效果源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>H5 video自定义视频控件</title> <style> * { margin: 0; padding: 0; } .box { background-color: #000; position:relative; display: inline

可以创建专业的客户端/服务器视频会议应用程序的音频和视频控件LEADTOOLS Video Conferencing SDK

LEADTOOLS Video Streaming Module控件为您创建一个自定义的视频会议应用程序和工具提供所有需要的功能.软件开发人员可以使用Video Streaming Module SDK,通过一些不同的配置来创建一些客户端/服务器应用程序.例如,如果有一个服务器需要向多个客户端发送音频/视频数据,那么就可以在服务器上创建这样的应用程序,比如多点传送或Web广播中的web多点传播.此外,当有多个捕捉点向一个源发送视频数据时,您可以创建安全/监控应用程序. 产品特征: 视频会议二进制

cocos2d-x视频控件VideoPlayer的用户操作栏进度条去除(转载)

目前遇到两个问题: (1)视频控件移除有问题,会报异常. (2)视频控件有用户操作栏,用户点击屏幕会停止视频播放. 对于第一个问题,主要是移除控件时冲突引起的,目前简单处理是做一个延时处理,先stop视频播放,然后一个Action移除自身,如下: local function onComplete() video:stop() video:runAction( cc.Sequence:create( cc.CallFunc:create(callback), cc.RemoveSelf:crea

cocos2d-x视频控件VideoPlayer的用户操作栏进度条去除

cocos目前出了新的视频播放器控件,仅支持ios和android平台,不支持window平台.项目打算使用一段视屏片头,所以使用该视频控件来播放片头. 目前遇到两个问题: (1)视频控件移除有问题,会报异常. (2)视频控件有用户操作栏,用户点击屏幕会停止视频播放. 对于第一个问题,主要是移除控件时冲突引起的,目前简单处理是做一个延时处理,先stop视频播放,然后一个Action移除自身,如下: local function onComplete() video:stop() video:ru

NVisionXR_iOS教程十 —— 加载视频控件

因为在下一章节我们需要和大家介绍多场景切换功能,所以在本章我们创建一个新的场景,如下图  重写NVScenePlay的生命周期  1.引用头文件#import ''NVVideoWidget.h''  2.在onCreate方法中实例话视频控件  代码:     video = [[NVVideoWidget alloc] initWithScenePlay:self WidgetName:@"video_widget"];      // 添加视频路径,可以是本地路径,也可以是网址(

android--------自定义视频控件(视频全屏竖屏自动切换)

android播放视频也是常用的技术,今天分享一个自定义视频控件,支持自定义控制 UI,全屏播放, 可以实现自动横竖屏切换的控件,跟随手机的位置而,重力感应自动切换横竖屏. 效果图:   代码下载Github:https://github.com/DickyQie/android-video 原文地址:https://www.cnblogs.com/zhangqie/p/8487734.html

Html5之高级-4 HTML5视频处理(H5中播放视频、编程实现视频播放器)

一.在 HTML5 中播放视频 在 HTML5 中播放视频 - HTML5 中提到最多的是视频处理,视频也是互联网中的重要应用.在HTML5中,增加了一个元素,以便在HTML文档中插入和播放视频,这个元素就是video元素 - video元素提供了播放.暂停和音量控件来控制视频,也提供了width和height属性控制视频的尺寸.如设置的高度和宽度等. - 使用video元素至少要提供两种视频格式的文件: OGG和MP4 - OGG: 包含Theora 视频和 Vorbis 音频解码器 - MP

Android高级_视频播放控件

一.Android系统自带VideoView控件 1. 创建步骤: (1)自带视频文件放入res/raw文件夹下: (2)声明初始化VideoView控件: (3)创建视频文件Uri路径,Uri调用parse(),传入(”android.resource://”+getPackageName()+”/”+R.raw.video)当前字符串获取资源路径: (4)为视频控件设置播放路径,VideoView对象调用setVideoURI(),传入Uri对象: (5)开始播放,VideoView对象调用

Android上定义播放器控件UniversalVideoView

在Android上播放视频最简单的方法是使用SDK中内置的VideoView,然后加上MediaController来控制视频播放暂停等,但是这样有一个缺点是无法定制自己的控制UI,所以这里提供一个自定义播放控件,它可以设置多种自定义属性(如loading样式,错误视频等),并且很容易在全屏与非全屏之间切换,另外支持Android V2.3及以上系统. 项目地址: https://github.com/linsea/UniversalVideoView 使用方法 完整的使用方法请参考项目里的Sa