七牛云以及video.js的用法教程

最新推荐文章于 2023-08-02 17:31:15 发布

置顶 Revival_Liang

最新推荐文章于 2023-08-02 17:31:15 发布

阅读量3k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/Revival_Liang/article/details/78068994

版权

web 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

1、七牛云用法：

（1）注册账号之后还需要通过验证之后才能使用。

（2）初次使用需要创建空间，如下图：

（3）上传小于500M的文件，如下图：

（4）上传大于500M的文件，点击上传文件按钮，会出现如下图：

点击打开，然后选择如下图：

点击文档进入下图：

点击访问，进入下图：

下载之后安装输入as和sk，在七牛云上可以找到，如下图：

2、video.js的使用方法：

（1）下载video.js，http://www.jq22.com/jquery-info404 ；打开页面往下拉，找比较新的版本下载，不建议用最新的，较新即可。

（2）下载好后把里面的js和css文件引入你的项目即可。

（3）开始使用：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video.js 6.2.5</title>
	<link href="css/video-js.css" rel="stylesheet">	
	<style>
		body{background-color: #191919}
		.m{ width: 740px; height: 400px; margin-left: auto; margin-right: auto; margin-top: 100px; }
	</style>
</head>

<body>
	<div class="m">
		<video id="my-video" class="video-js" controls preload="auto" width="740" height="400"
		  poster="MY_VIDEO_POSTER.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>
		  <script src="http://vjs.zencdn.net/6.2.5/video.min.js"></script>	
		  <script type="text/javascript">
			var myPlayer = videojs('my-video');
			videojs("my-video").ready(function(){
				var myPlayer = this;
				myPlayer.play();
			});
		</script>
	</div>

</body>
</html>

（4）动态修改播放地址：

var aid = $(this).attr('aid');
            var $video = $('#example_video_1');
            myPlayer.src(aid); /*动态设置video.js播放的地址。*/
            myPlayer.autoplay();

（5）样式

 //播放按钮
 .vjs-big-play-button{
 	width: 3.0rem !important;
	height: 3.0rem !important;
	line-height: 3.0rem !important;
	top: 3rem !important;
	left: 8.0rem !important;
	border: none !important;
	border-radius: 50% !important;
	background-color: rgba(255,255,255,0.3) !important;
 }
 // 播放按钮箭头图标
 .vjs-icon-placeholder:before{
 	font-size: 1.3rem !important;
 	position: relative !important;
 }
 // 视频封面
 .vjs-poster{
 	background-size: cover !important;
 }
 //重播等小组件颜色
 .vjs-button>.vjs-icon-placeholder:before, .vjs-modal-dialog .vjs-modal-dialog-content{
     color: yellow !important;
 }

（6）设置默认情况下不全屏的属性playsinline，加到video标签即可。

（7）原生的video用法 <video width="100%;" height='100%' playsinline :src='data.video' controls="controls"></video>

（8）原生video的事件

loadstart	浏览器开始在网上寻找媒体数据
progress	浏览器正在获取媒体数据
suspend	浏览器暂停获取媒体数据，但是下载过程并滑正常结束
abort	浏览器在下载完全部媒体数据之前中止获取媒体数据，但是并不是由错误引起的
error	获取媒体数据过程中出错
emptied	video元素或audio元素所在网络突然变为未初始化状态可能原因有两个:1.载入媒体过程中突然发生一个致命错误 2.在浏览器正在选择支持的播放格式时，又调用了load方法重新载入媒体
stalled	浏览器尝试获取媒体数据失败
play	即将开始播放，当执行了play方法时触发，或数据下载后元素被设为autoplay属性
pause	播放暂停，当执行了pause方式时触发
loadedmetadata	浏览器获取完毕媒体的时间长和字节数
waiting	播放过程由于得不到下一帧而暂停播放（例如下一帧尚未加载完毕），但很快就能够得到下一帧
canplay	浏览器能够播放媒体，但估计以当前的播放速率不能直接播放完毕，播放期间需要缓冲
canplaythrough	浏览器能够播放媒体，而且以当前播放速率能够将媒体播放完毕，不再需要进行缓冲
seeking	seeking属性变为true，浏览器正在请求数据
seeked	seeking属性变为false，浏览器停止请求数据
timeupdate	由于播放位置被改变，可能是播放过程中的自然改变，也可能是被人为的改变，或由于播放不能连续而发生的跳变
ended	播放结束后停止播放
ratechange	defaultplaybackRate属性（默认播放速率）或playbackRate属性（当前播放速率）被改变
druationchange	播放时长被改变
volumechange	volume属性（音量）被改变或muted属性（静音状态）被改变

Revival_Liang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
七牛云以及video.js的用法教程

1、七牛云用法：（1）注册账号之后还需要通过验证之后才能使用。（2）初次使用需要创建空间，如图：（3）上传小于500M的文件，如图：（4）上传大于500M的文件，点击上传文件按钮，会出现如图：点击打开，然后选择如图：
复制链接

扫一扫