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

时间:2022-08-23 14:52:58

1、七牛云用法:

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

(2)初次使用需要创建空间,如下图:

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

(3)上传小于500M的文件,如下图:

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

(4)上传大于500M的文件,点击上传文件按钮,会出现如下图:

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

点击打开,然后选择如下图:

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

点击文档进入下图:

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

点击访问,进入下图:

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

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

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

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属性(静音状态)被改变