七牛云以及video.js的用法教程
来源:互联网 发布:cnmd是什么意思网络 编辑:程序博客网 时间:2024/06/04 19:00
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的事件
2.在浏览器正在选择支持的播放格式时,又调用 了load方法重新载入媒体
stalled浏览器尝试获取媒体数据失败play即将开始播放,当执行了play方法时触发,或数据下载后元素被设为autoplay属性pause播放暂停,当执行了pause方式时触发loadedmetadata浏览器获取完毕媒体的时间长和字节数waiting播放过程由于得不到下一帧而暂停播放(例如下一帧尚未加载完毕),但很快就能够得到下一帧canplay浏览器能够播放媒体,但估计以当前的播放速率不能直接播放完毕,播放期间需要缓冲canplaythrough浏览器能够播放媒体,而且以当前播放速率能够将媒体播放完毕,不再需要进行缓冲seekingseeking属性变为true,浏览器正在请求数据seekedseeking属性变为false,浏览器停止请求数据timeupdate由于播放位置被改变,可能是播放过程中的自然改变,也可能是被人为的改变,或由于播放不能连续而发生的跳变ended播放结束后停止播放ratechangedefaultplaybackRate属性(默认播放速率)或playbackRate属性(当前播放速率)被改变druationchange播放时长被改变volumechangevolume属性(音量)被改变或muted属性(静音状态)被改变阅读全文
0 0
- 七牛云以及video.js的用法教程
- video.js使用教程API
- video.js使用教程API
- video.js使用教程API
- video.js使用教程API
- video.js的应用
- java正则用法以及js的正则
- java正则用法以及js的正则
- java正则用法以及js的正则
- 关于H5中的<video></video>标签的用法总结
- jquery uploadify的JS用法以及JAVA类的用法
- jquery uploadify的JS用法以及JAVA类的用法
- jquery uploadify的JS用法以及JAVA类的用法
- Video.js
- Video.js
- video.js
- HTML5教程之video标签的应用
- 分享一个HTML5的video用法
- 数据结构与算法 ADT(抽象数据类型)
- 自定义View圆角边框
- 退出作用域时自动调用指定代码
- 16-模板和泛型编程
- 关于编程的一点体会(Tips,持续更新中)
- 七牛云以及video.js的用法教程
- 细说 Lambda 表达式
- ubuntu 14.04 安装为止笔记 添加到桌面
- sublime text2 for mac 配置全集
- 接口测试用例的设计
- 电商笔记-04(简单查询)
- el表达式foreach循环出来的input 只能获取第一个文本框中的val,怎么解决?
- 图像处理常用边缘检测算子总结
- How JavaScript works: an overview of the engine, the runtime, and the call stack