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

6 篇文章 0 订阅
1 篇文章 0 订阅

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;
		});
	}
}

 

评论 5 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

云兮莫愁

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值