VideoJS——HTML5视频播放器_reactvideo.js资源-CSDN文库

videojs

html5

5星 · 超过95%的资源需积分: 50 35 浏览量 2015-10-09 11:21:22 上传评论收藏 224KB PDF 举报

资源推荐

资源详情

资源评论

VideoJS —— HTML5 视频播放器

文档说明文档说明

本文档针对拟学习Video.js的初学者。本文档所有内容摘自VideoJs官网的文档资料、及个人的总结。Video.js官方网址：

https://github.com/videojs/video.js/tree/stable

修订记录修订记录

修订日修订日

期期

修订版本修订版本修订章节修订章节修订描述修订描述作者作者

2015.05

.29

V1.0 编写杨青青

一、一、Video.js使用使用说明说明

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持

HTML5 则自动使用 Flash 播放器。 VideoJS 是最流行的 HTML5 视频播放器，免费、开源，可使用 CSS 轻松定制皮肤，

支持全屏。

使用步骤如下：

1）在<head>中引入：

2）加入HTML5的<video>标签：

<video id="example_video_1" class="video-js vjs-default-skin"

controls preload="none" width="640" height="264"

poster="http://video-js.zencoder.com/oceans-clip.png"

data-setup='{}'>

<source src="http://5853.vod.myqcloud.com/5853_8cbfbd4a05a111e584f8d73f7f367d12.f20.mp4" type='video/mp4'

</video>

注意：本段代码中的src所指向的url地址，是本地视频上传到腾讯云经过转码后的URL地址。poster：规定视频下载时显示

的图像，或者在用户点击播放按钮前显示的图像，即预览图（海报图片）。

3）使用Video.js设置视频自动播放：

var myplayer = videojs('example_video_1');

videojs("example_video_1").ready(function(){

var myplayer=this;

myplayer.play();

});

</script>

其中：var myplayer = videojs('example_video_1');是得到播放器对象。

二、方法二、方法

1.addTextTrack ：向视频添加一个新的文本轨道

语法语法

audio|video.addTextTrack(kind,label,language)

参数参数

值值描述描述

var howLoudIsIt = myPlayer.volume();

// set

myPlayer.volume=0; // Set volume to half

示例：small_video是小视频窗口，large_video是大视频窗口，需要实现大视频声音正常，小视频没有声音。

var smallVideo = document.getElementById("small_video");

var largeVideo = document.getElementById("large_video");

smallVideo.volume=0;

</script>

5.hide：如果当前组件显示，就隐藏

语法：

vPlayer.hide();

示例：

var smallVideo = document.getElementById("small_video");

var largeVideo = document.getElementById("large_video");

var paused= false;

var vPlayer = videojs("large_video");

vPlayer.hide();

</script>

6.show：如果当前组件隐藏，就显示出来，用法同hide();

7.ready：当视频加载完毕后，绑定一个事件。

示例：将下图中的“开始”图标移动到视频中央位置

代码：

vPlayer.ready(function() {

//vPlayer.dimensions(largeWidth, largeHeight);

setMainZoom(timestream.defaultZoom);

});

其中，setMainZoom方法如下

var setMainView = function(d_width, d_height, d_topSpace, d_leftSpace) {

vPlayer.dimensions(d_width + '%', d_height + '%');

$('#large_video').css('width', d_width + '%');

$('#large_video').css('height', d_height + '%');

$('#large_video').css('top', d_topSpace + 'px');

$('#large_video').css('left', d_leftSpace + 'px');

$('.vjs-big-play-button').css('top', (parseInt(largeHeight / 3) - d_topSpace) + 'px' );

$('.vjs-big-play-button').css('left', (parseInt(parseInt($('.main').css('width')) / 3) - d_leftSpace) + 'px' );

// $('.vjs-control-bar').css('width', $('.main').css('width'));

// $('.vjs-control-bar').css('left', 0 - d_leftSpace + 'px');

// $('.vjs-control-bar').css('top', parseInt($('.main').css('height')) - d_topSpace - parseInt($('.vjs-control-bar').css('height')) +

'px');

// $('.vjs-control-bar').css('z-index', '999');

};

var setMainZoom = function(zoom) {

if(typeof(zoom) != "undefined") {

剩余14页未读，继续阅读

评论收藏

内容反馈

tracine0513

2016-01-26

还行吧，算得上一个比较用心的人
FateStay_Night

2017-06-27

还好吧，不错
imdzjr

2016-12-16

没有支持Hls的高级说明
GOODSENSE

2016-07-20

可以用，不错

qq_31867623

粉丝: 1
资源: 1

VideoJS —— HTML5 视频播放器

视频播放器插件Video.js

video-js(视频播放器插件)

videoJs播放视频和视频流

video-js 播放器demo

video.js使用说明

pyInstaller 1.4

Videojs开源HTML5和Flash视频播放器

xxx@xxx.com

videojs-6.6.0

HTML5标签video官方文档

lion-player:Lion Player-由VideoJS支持的开源React视频播放器

Lion Player - 由 VideoJS 提供支持的开源 React 视频播放器

videojs-vpaid:覆盖VideoJS视频播放器的VPAID插件。 稳定，但始终在进行中

VIDEOJS 6.1.1-releases版本 最新版本

videojs视频可拖动播放与不可拖动播放

videoJs.zip

video.js-7.18.1 代码及demo，附官网及github地址

hLive, 基于h5和videojs的视频直播插件.zip

PHP 获取视频video音频audio详情【时长、大小、尺寸、格式等】

一个移动端H5Video标签播放视频的实现

videojs 6.6.0最新版本

最新google-play-services-sdk-15.0.1版本资源

videojs7.4.1

videojs-skin-twitchy:恰好类似于某个视频游戏流媒体网站的Video.js皮肤

手机端videojs播放m3u8的文件.zip

videojs最新版6.2.7

videojs所需的JS工具

VideoJs播放MP4视频通过blob加密视频源地址

videojs源码rtmp推流hls播放器html5原生态播放器可用

H5视频播放器

最新资源

videojs-vpaid:覆盖VideoJS视频播放器的VPAID插件。稳定，但始终在进行中

VIDEOJS 6.1.1-releases版本最新版本