前端视频插件Video.js的基本使用

1，使用前准备。先移步官网对插件进行大致的了解，以判断是否满足需求的需要，官网中的demo相当实用。在下就是官网，

2，正式开始，首先引入相关的文件


<link rel="stylesheet" href="../css/video/video-js.min.css" />
<script src="../js/common/jquery-2.1.4.js"></script>
<script src="../js/video/video.min.js"></script>

3.HTML代码部分

<!-- 官网demo中可以使用的一些情况 -->
<div class="m"><video id="my-video" class="video-js" controls preload="auto" width="960" height="400"poster="m.jpg" data-setup="{}"><source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"><source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"><source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"><p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p></video><!-- 本人实际使用的代码 -->
<div class="content-right-top" id="video_play"><video id="my-video" class="video-js " controls preload="auto" data-setup="{}"></video>
</div>

3，JS代码部分

（1）首先定义相关属性，根据自己的需求进行取舍。

//设置中文videojs.addLanguage('zh-CN', {"Play" : "播放","Pause" : "暂停","Current Time" : "当前时间","Duration" : "时长","Remaining Time" : "剩余时间","Stream Type" : "媒体流类型","LIVE" : "直播","Loaded" : "加载完毕","Progress" : "进度","Fullscreen" : "全屏","Non-Fullscreen" : "退出全屏","Mute" : "静音","Unmute" : "取消静音","Playback Rate" : "播放速度","Subtitles" : "字幕","subtitles off" : "关闭字幕","Captions" : "内嵌字幕","captions off" : "关闭内嵌字幕","Chapters" : "节目段落","Close Modal Dialog" : "关闭弹窗","Descriptions" : "描述","descriptions off" : "关闭描述","Audio Track" : "音轨","You aborted the media playback" : "视频播放被终止","A network error caused the media download to fail part-way." : "网络错误导致视频下载中途失败。","The media could not be loaded, either because the server or network failed or because the format is not supported." : "视频因格式不支持或者服务器或网络的问题无法加载。","The media playback was aborted due to a corruption problem or because the media used features your browser did not support." : "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。","No compatible source was found for this media." : "无法找到此视频兼容的源。","The media is encrypted and we do not have the keys to decrypt it." : "视频已加密，无法解密。","Play Video" : "播放视频","Close" : "关闭","Modal Window" : "弹窗","This is a modal window" : "这是一个弹窗","This modal can be closed by pressing the Escape key or activating the close button." : "可以按ESC按键或启用关闭按钮来关闭此弹窗。",", opens captions settings dialog" : ", 开启标题设置弹窗",", opens subtitles settings dialog" : ", 开启字幕设置弹窗",", opens descriptions settings dialog" : ", 开启描述设置弹窗",", selected" : ", 选择","captions settings" : "字幕设定","Audio Player" : "音频播放器","Video Player" : "视频播放器","Replay" : "重播","Progress Bar" : "进度小节","Volume Level" : "音量","subtitles settings" : "字幕设定","descriptions settings" : "描述设定","Text" : "文字","White" : "白","Black" : "黑","Red" : "红","Green" : "绿","Blue" : "蓝","Yellow" : "黄","Magenta" : "紫红","Cyan" : "青","Background" : "背景","Window" : "视窗","Transparent" : "透明","Semi-Transparent" : "半透明","Opaque" : "不透明","Font Size" : "字体尺寸","Text Edge Style" : "字体边缘样式","None" : "无","Raised" : "浮雕","Depressed" : "压低","Uniform" : "均匀","Dropshadow" : "下阴影","Font Family" : "字体库","Proportional Sans-Serif" : "比例无细体","Monospace Sans-Serif" : "单间隔无细体","Proportional Serif" : "比例细体","Monospace Serif" : "单间隔细体","Casual" : "舒适","Script" : "手写体","Small Caps" : "小型大写字体","Reset" : "重启","restore all settings to the default values" : "恢复全部设定至预设值","Done" : "完成","Caption Settings Dialog" : "字幕设定视窗","Beginning of dialog window. Escape will cancel and close the window." : "开始对话视窗。离开会取消及关闭视窗","End of dialog window." : "结束对话视窗"});

（2）数据获取部分

var test = {/*** 查询相关数据*/queryVideo : function() {$.ajax({type : "post",dataType : "json",url : url,async : false,success : function(result) {if (result && result.list) {var str = "";// 左侧列表var content = "";// 右侧内容var videoplay = "";// 视频内容var firstVideoCourse, firstPath = "";$.each(result.list, function(i, h) {                                             //获取第一个视频if(i == 0){firstVideoCourse = h.videoCourse;firstPath = h.id;}str += '<a onclick="helpCourse.createVideo(\'' + h.videoCourse + '\')" class="item" data-tab="' + h.id + '">' + h.courseTitle + '</a>';content += '<div class="ui bottom attached tab segment" data-tab="' + h.id + '" >' + h.textCourse + '</div>';});$("#attached_menu").html(str);$("#help_content").html(content);$('.menu .item').tab("change tab", firstPath);helpCourse.createVideo(firstVideoCourse);}},error : function() {}});},createVideo : function(videoCourse) {$(".suchcaserightcontent").scrollTop(0);// 销毁上一次的视频播放videojs("my-video").ready(function() {var myPlayer = this;myPlayer.dispose();});$("#video_play").empty();var videoplay = "";videoplay += '<video id="my-video" class="video-js" controls poster="../images/helpVideoDefault.png">';videoplay += '<source id="videoSrc" src="/userfiles/1/video/' + videoCourse + '.mp4" type="video/mp4"></video>';$("#video_play").html(videoplay);$(".vjs-has-started").css("display", "block");$(".vjs-big-play-button").css("display", "block");videojs('my-video').ready(function() {var myPlayer = this;});}
}

前端视频插件Video.js的基本使用相关推荐

视频播放插件 Video.js 使用和个版本下载
来源:https://blog.csdn.net/zhanghao143lina/article/details/79457035 Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,V ...
H5视频之video.js 视频直播前端
转自https://blog.csdn.net/liuyuqin1991/article/details/79310080 原理视频直播的流程原理图如下: 大致过程(摘自知乎:https:// ...
java flash 播放器_视频播放插件Video.js
插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器.(要支持 ...
js-视频播放插件Video.js简单使用
插件下载地址: http://www.jq22.com/jquery-info404 Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 ...
php网页视频播放插件下载_视频播放插件Video.js
插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器.(要支持 ...
摄屏播放插件html5,Js视频播放器插件Video.js使用方法详解
Video.js快速入门我们可以下载 Video.js 的源码放到自己的服务器上,或者使用免费的 CDN 托管版本. 在页面中引用video-js.cs样式文件和video.js 使用免费的CDN托 ...
视频播放插件(video.js)
一.视频播放插件 1.插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Fla ...
H5视频之video.js播放m3u8
最近接触了这一块,简单说下吧. m3u8 是一种基于 HTTP Live Streaming 文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成.目前由 Apple.inc 率 ...
HTML5视频播放插件 video.js介绍
本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=kjab&title=HTML5%E8%A7%86%E9%A2%91%E6%92%AD ...
vue前端表格插件_Grid.js - 跨框架的前端表格插件
只想简简单单画个表格,但 React,Vue,Angular,-,这么多前端框架,各自都有不同的表格渲染库.就没有表格库能"一次画表,到处运行"吗?来看看 Grid.js 这个跨框 ...

前端视频插件Video.js的基本使用

前端视频插件Video.js的基本使用相关推荐

最新文章

热门文章