video.js简单使用
Video.js 是单使一个通用的在网页上嵌入视频播放器的 JS 库。Video.js 自动检测浏览器对 HTML5 的单使支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。香港云服务器单使通过相关js可支持IE8，单使IE9及以上本就支持h5。单使 插件支持自定义组建按钮(个人测试5.0及以上版本自定义按钮失效)，单使支持视频静态图片指定等。单使 【本文是专栏作者张勇波的原创文章，转载请通过获取作者授权】 戳这里，单使看该作者更多好文
<%-- Created by IntelliJ IDEA. User: 张勇波 Date: 2017/1/4 Time: 15:29 --%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>videojs demo</title> <link href="video-js-5.15.1/video-js.min.css" rel="stylesheet"> <script src="video-js-5.15.1/ie8/videojs-ie8.min.js"></script> <script src="video-js-5.15.1/video.min.js"></script> <script src="video-js-5.15.1/lang/zh-CN.js"></script> <script src="video-js-5.15.1/jquery.min.js"></script> <script> videojs.options.flash.swf = "video-js-5.15.1/video-js.swf"; </script> </head> <body> <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"> <%--字幕文件地址--%> <track src="video-js-5.15.1/examples/elephantsdream/captions.en.vtt" srclang="en" label="English" kind="caption"> <track src="video-js-5.15.1/examples/elephantsdream/captions.ar.vtt" srclang="zh-cn" label="简体中文" kind="caption" default> </video> <input type="button" onclick="state(play)" value="开始"> <input type="button" onclick="state(pause)" value="暂停"> <% String mp4 = request.getParameter("mp4"); String picture = request.getParameter("picture"); %> <script type="text/javascript"> var myvideo; function videojs_run() { var mp4 = "<%=mp4%>"; var picture = "<%=picture%>"; //播放类型支持，单使mp4、亿华云单使webm、单使ogg myvideo = videojs(my-video,单使 { plugins: { //调用插件 // examplePlugin: { exampleOption: false} }, language: "zh-CN", loop: false,//循环播放 autoplay: false,//自动播放 // width: "1270",//宽度 // height: "663",//高度 poster: picture,//静态封面 }, function () { // 播放器初始化后回调 this.src(mp4); // this.play();//播放 // this.pause();//暂停 this.volume(0.3); // this.load(); }); } function state(val) { if (val == "play") { myvideo.play(); } else if (val == "pause") { myvideo.pause(); } } /** * 编辑插件 * @param options */ function examplePlugin(options) { this.on(play, function (e) { alert(playback has started!); }); this.on(pause, function (e) { alert(pause has started!); }); } //注册插件 videojs.plugin(examplePlugin, examplePlugin); $(function () { videojs_run(); }); </script> </body> </html>
- 最近发表
- 随机阅读
- a、变更前的公司证件扫描件(代码证或者营业执照)及联系人身份证复印件、变更后的公司证件扫描件(代码证或者营业执照)及新的联系人身份证复印件;身份证复印件需本人签名，公司证件复印件需加盖公章。
- JVM 从入门到放弃之 ZGC 垃圾收集器
- 数据库为什么会分为“行式存储”和“列式存储”呢？
- Vue2剥丝抽茧-响应式系统之异步队列
- 4、选择一个安全的域名注册商进行域名注册
- 浏览器数据库IndexedDB入门教程
- Netty学习基础：BIO、NIO、AIO
- 如何更优雅的写出你的SQL语句
- 便宜域名使用如何？小白可以买到便宜域名吗？
- 分布式数据库TiDB在商业银行的设计与实践
- 如何使用Redis构建轻量级微服务
- 一篇带你揭秘 MobX 实现原理
- 互联网中的地址是数字的IP地址，域名解析的作用主要就是为了便于记忆。
- if-else 判断语句过多该如何处理？
- MySQL主从延时这么长，要怎么优化？
- Streams：一个新的Redis通用数据结构
- ④注册门槛低
- 太实用了！Schedule模块， Python 周期任务神器！
- 初探CTF中特殊框架逆向
- 一篇带给你 React 18 全览
- 搜索