一，Web视频播放器插件

一个好的播放器需要满足以下需求：
1. 支持所有主流浏览器（兼容性保障）
2. 用户能与播放器交互，播放器必须提供必要的API，比如播放，暂停，停止，拖动，倍速播放，片源切换
3. 可定制外观，方便后期扩展，UI定制化保障不同的用户自定义
4. 支持flv、mp3、mp4格式，支持播放列表
5. 详尽的帮助文档说明，方便开发者使用
二、播放器插件举例
1、videoJS：
videojs是一个兼容html5的视频播放工具，早期版本兼容所有浏览器，方法是：提供三个后缀名的视频，并在不支持html5的浏览器下生成一个flash的版本。
最新的3.1.0版本优化了之前的做法，只需要提供两个格式的视频，页面制作起来更加方便，只有两步走：
1、引用脚本，videojs很为你着想，直接cdn了，你都不需要下载这些代码放入自己的网站
<link href=”http://vjs.zencdn.net/c/video-js.css” rel=”stylesheet”>
<script src=”http://vjs.zencdn.net/c/video.js”></script>
2、页面中使用方式：
（1）直接在HTML中设置属性
<video id=”my_video_1″ class=”video-js vjs-default-skin” controls preload=”auto” width=”640″ height=”264″ poster=”my_video_poster.png” data-setup=”{}”>
<source src=”my_video.mp4″ type=’video/mp4′>
<source src=”my_video.webm” type=’video/webm’>
</video>
其中poster就是视频的缩略图，那俩source一个指向mp4视频，一个指向webm视频，在页面加载过程中，video.js会判断浏览器支持哪个格式视频，会自动加载可播放的视频。
（2）通过API设置视频：
<video id="videoID"></video>

　　var player = videojs('videoID',{
　　　　controls: true,  //控制条
　　　　preload: 'none', //是否自动加载
　　　　width: '640',
　　　　height: '264',
　　　　poster: 'media/poster.jpg',
　　　　sources: [
　　　　　　{src: 'media/001.mp4',type: 'video/mp4'}
　　　　]
　　},function(){
　　　　var that = this;
　　　　that.on('pause',function(){
　　　　　　old_time = this.currentTime();
　　　　　　console.log('pause:' + old_time);
　　　　})
　　　　that.on('play',function(){
　　　　　　new_time = this.currentTime();
　　　　　　　console.log('playing:' + this.currentTime());
　　　　})
　　　　that.on('seeked',function(){
　　　　　　new_time = this.currentTime();
　　　　　　console.log('seeked:' + this.currentTime());
　　　　　　if (old_time) {
　　　　　　　　console.log(new_time > old_time ? '拖动快进' : '拖动后退');
　　　　　　}
　　　　})
　　　　that.on('ended',function(){
　　　　　　console.log('ended:'+ this.currentTime());
　　　　　　console.log('duration:' + this.duration());
　　　　})
　　})

转载于:https://www.cnblogs.com/zhang134you/p/7081036.html

videoJS如何用相关推荐

  1. videojs简单使用

    videojs简单使用 video js可以解析很多格式的视频,包括m3u8,这里简单介绍一下如何使用,主要是基于如何用js操作. 导入包 <link href="https://vj ...

  2. 如何用python读取文本中指定行的内容

    如何用python读取文本中指定行的内容 搜索资料 我来答 分享 新浪微博 QQ空间 浏览 5284 次 查看全文 http://www.taodudu.cc/news/show-64036.ht ...

  3. 子程序调用与宏定义的异同_如何用数控系统进行简单的宏程序调用？老师傅告诉你，用G65就行...

    什么是简单调用?很多人都不知道吧,如果想要深入操作宏, 就先要学会变量,学会变量之担,再去操作宏,就会变得非常的简单,今天给大家分享如何用G65进行简单的宏程序调用. 用户宏的简单宏调用是指在主程序中 ...

  4. python判断素数的函数_如何用python求素数

    如何用python求100以内的素数? 质数(primenumber)又称素数,有无限个.质数定义为在大于1的自然数中,除了1和它本身以外不再有其他因数的数称为质数,如:2.3.5.7.11.13.1 ...

  5. axure按钮切换颜色_如何用Axure画出Web产品的列表组件：基础画法

    Web产品的列表组件在画原型的时候比较常见,所以PM有必要深入了解它的各种交互效果和对应的原型画法. 除了通过表格来画出简单列表之外,我们还可以通过中继器来画出列表,相应的原型效果请查看https:/ ...

  6. 学习如何用平板电脑设计和绘制自己的动漫角色

    创造你自己的动漫人物插图 学习如何用平板电脑设计和绘制自己的动漫角色 大家好,我是Pesa,一个想把快乐和希望融入到讲述故事的插画中的插画师.一点一点地,我画出我喜欢和希望的事物的场景,它把我带到了1 ...

  7. 如何用 Windows Live Writer 和 Word 2013 分别发表博客到Cnblog 和CSDN

    ps CSDN 老是505错误,放弃了 为什么会写这篇 最近写博客在 Cnblog 上面写博客, 发现图片不能复制了直接粘贴上,这对于把博客当随手笔记的人来说无疑非常痛苦.求助于博客园,他们让我用 W ...

  8. 功率曲线k值_分布式光伏：如何用“小时功率曲线”估算自用容量比例

    原标题:分布式光伏:如何用"小时功率曲线"估算自用容量比例 小时功率曲线指的是组件单位小时的发电效率,在不考虑衰减与污染等因素的情况下,只和一天内每个时段太阳能总辐射量有关.在自用 ...

  9. 怎么用python画个电脑_python语言还是java如何用python画爱心

    用python绘制爱心的基本步骤如下: 002pc.com对<python语言还是java如何用python画爱心>总结来说,为我们学习Python很实用. 首先先下载安装好python程 ...

最新文章

  1. Android -- TextView与EditText 同步显示
  2. python中ndarray如何生成单独的记事本文件_NumPy-快速处理数据--ndarray对象--数组的创建和存取...
  3. 9、Windows驱动开发技术详解笔记(5) 基本语法回顾
  4. 二维稳态热传导 代码实现_常用振动激励方式：稳态正弦 、瞬态和随机激振
  5. Persistent Memory编程简介
  6. 微信小程序之下拉刷新，上拉更多列表实现
  7. VScode 同时开多个窗口
  8. （Twinkle Tray）快速调整外接显示器屏幕亮度
  9. mysql数据库教程官网_数据库MySQL官方推荐教程-MySQL入门到删库
  10. 高斯正算matlab,MATLAB实现高斯-克吕格投影正算
  11. Racket编程指南——1 欢迎来到Racket!
  12. 电子邮件格式详细介绍
  13. 什么是SVG及使用方式
  14. 《嵌入式 – GD32开发实战指南》第3章 GPIO流水灯的前世今生
  15. 为什么说串行比并行快
  16. android 获取画布,Android触摸事件如何实现笔触画布详解
  17. Mybatis to_date方法(ORACLE)
  18. spring4 搭建开发环境
  19. 如何绘制公司组织结构图
  20. 如何在微信小程序的页面间传递数据？

热门文章

  1. 基于CMSIS创建典型STM32F4工程
  2. 第7周实践项目2 队列的链式存储结构及其基本运算的实现
  3. [YTU]_2424 C语言习题 字符串比较
  4. OpenCv：Mat矩阵的初始化
  5. fh admin mysql版本_mysql5.6 和 mysql8 配置的差异
  6. matlab基础（0）
  7. 基本粒子群算法（PSO）的改进
  8. android 字符串,textview
  9. Ubuntu中配置Java环境变量时，出现command not found问题解决记录
  10. ZOJ3469 Food Delivery 区间DP