VideoJS——HTML5视频播放器_TheelementorIDsuppliedisnotvalid

videojs

html5

5星 · 超过95%的资源需积分: 50 6 浏览量更新于2023-03-16 收藏 224KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

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页未读，继续阅读

qq_31867623

粉丝: 1
资源: 1

会员权益专享

VideoJS —— HTML5 视频播放器

video.js 实现视频只能后退不能快进的思路详解

前端项目-videojs-flash.zip

h5播放器js文件包

videojs-h5手机端h5播放器

videojs.getplaxers("video-player").html5player.tech_.setplaybackrate(1.5)

videojs使用播放器

videojs-swf

20个html5视频播放器及代码

10个最佳jQuery和HTML5媒体播放器

videojs vue 动态source_手把手从零开始封装一个vue视频播放器组件

简述 VideoJS 和 JQuery 进行 hls 媒体流播放，它们的主要工作是什么？

html5实现视频列表js代码,JavaScript实现html5视频播放器列表

videojs展示视频标题

html5 video播放器 下载

videojs 视频画中画

angular video.js播放rtsp视频流

video.js广告插件videojs-preroll的使用

ext js6视频播放器

使用videojs-panorama全景播放器播放全景视频，并在后台利用python识别人脸特侦点

使用videojs播放视频时展示视频的标题

会员权益专享

最新资源

html5 video播放器下载