Video.js 简单的使用介绍

vedio.js 是一款视频播放插件,它会自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。下面来介绍下它的使用:

引用video-js.cs样式文件和video.js

<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>

设置flash播放器的路径,如果你的浏览器不支持html5,将会使用flash播放

<script>
    videojs.options.flash.swf = "video-js.swf";
</script>

body部分,这里支持三种格式MP4,webm,ogg,也可以设置网络路径,poster:视频的封面图片

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="1280" height="800"
    poster="http://video-js.zencoder.com/oceans-clip.png"
    data-setup="{}">
    <source src="wangmaohuijieshao.mp4" type=‘video/mp4‘ />
    <!--<source src="http://video-js.zencoder.com/oceans-clip.webm" type=‘video/webm‘ />
    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type=‘video/ogg‘ />-->
    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
</video>

自动播放:

<script type="text/javascript">
    var myPlayer = videojs(‘example_video_1‘);
    videojs("example_video_1").ready(function () {
        var myPlayer = this;
        myPlayer.play();
    });
</script>

一些参数:

var myPlayer = videojs(“example_video_1″);//获取对象,example_video_1就是video标签的id值 
myPlayer.play();//播放
myPlayer.pause();//暂停
var whereYouAt = myPlayer.currentTime();//获取播放进度:
myPlayer.currentTime(120);//设置播放进度:
var howLongIsThis = myPlayer.duration();//视频持续时间,加载完成视频才可以知道视频时长,且在flash情况下无效
var whatHasBeenBuffered = myPlayer.buffered();//缓冲,就是返回下载了多少
var howMuchIsDownloaded = myPlayer.bufferedPercent();//百分比的缓冲
var howLoudIsIt = myPlayer.volume();//获取声音大小
myPlayer.volume(0.5);//设置声音大小(0-1之间)
var howWideIsIt = myPlayer.width();//取得视频的宽度
myPlayer.width(640);//设置宽度
var howTallIsIt = myPlayer.height();//获取高度
myPlayer.height(480);//设置高度:
myPlayer.size(640,480);//一步到位的设置大小:
myPlayer.enterFullScreen();//全屏

//自定义事件
var myFunc = function(){
// Do something when the event is fired
};
//添加事件
myPlayer.addEvent(“eventName”, myFunc);
//删除事件
myPlayer.removeEvent(“eventName”, myFunc);
时间: 2024-08-25 04:59:34

Video.js 简单的使用介绍的相关文章

视频播放插件Video.js简单使用

插件下载地址: Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-

Node.js简单介绍

Node.js是一个能够让javascript执行在server上的平台,既是语言又是平台. Node.js是一个实时web应用程序的平台. Node.js有强大的包管理器npm,故node相关软件安装用npm命令安装. Node.js简单介绍,布布扣,bubuko.com

video.js的简单用法

今天项目中需要跨浏览器地播放视频,在网上找了一下,找到了video.js,记录一下video.js的简单用法. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 <html> <head> ... <!-- 引入vide

Video.js --视频播放插件使用

vedio.js 是一款视频播放插件,它会自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器.下面来简单介绍下它的简单使用: 引用video-js.cs样式文件和video.js <link href="video-js.css" rel="stylesheet" type="text/css"> <script src="video.js"></sc

video.js视频播放器

免费视频播放器videojs中文教程 Video.js是一款web视频播放器,支持html5和flash两种播放方式.更多关于video.js的介绍,可以访问官方网站介绍,我之前也写过一篇关于video.js的使用心得,有兴趣的可以点这里 , 阅读的人数还蛮多的,有些热心的读者甚至还给过我小额打赏,钱虽不多,但是很感动.最几天又收到几位网友的私信,问一些关于videojs使用方面的问题.我自己都不记得videojs长什么模样了,出于别人对我的信任,又回头看了一遍上一篇文章,还是2014年的时候写

html5 video.js 使用及兼容所有浏览器

http://www.itnose.net/detail/6076396.html 一.准备材料 video.js下载: http://www.videojs.com/ 二.代码 引入相关文件: 贴入html代码: <video id="example_video_1" class="video-js" width="640" height="410" controls="controls" auto

video.js使用教程API

videojs就提供了这样一套解决方案,他是一个兼容html5的视频播放工具,早期版本兼容所有浏览器,方法是:提供三个后缀名的视频,并在不支持html5的浏览器下生成一个flash的版本. 最新的3.1.0版本优化了之前的做法,只需要提供两个格式的视频,页面制作起来更加方便,只有两步走:1.引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站<link href="http://vjs.zencdn.net/c/video-js.css" rel

关于Node.js, Jade一点小小的介绍。

本文出自:http://blog.csdn.net/svitter node.js大家知道的可能比较多,但是jade大家可能就不知道了..GFW封杀掉google以后,今天在百度上找了好久也没有找到--哎,仍需前进. 肯定有在github上获取一些框架的小白和我一样,看了到了json,jade,less这些莫名奇妙的东西然后怅然不知所云. jade可以用来生成html文件,写法要简单很多.具体见:http://jade-lang.com/ 那么jade是什么呢?jade就是node 的一个框架,

video.js的使用

跨浏览器地播放视频,在网上找了一下,找到了video.js,记录一下video.js的简单用法. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 <html> <head> ... <!-- 引入video.js的样式