video.js简单使用

开发 开发工具
Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库。Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。通过相关js可支持IE8,IE9及以上本就支持h5。

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库。Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。通过相关js可支持IE8,IE9及以上本就支持h5。

插件支持自定义组建按钮(个人测试5.0及以上版本自定义按钮失效),支持视频静态图片指定等。

 

[[181286]]

 

  1. <%-- 
  2.  Created by IntelliJ IDEA. 
  3.  User: 张勇波 
  4.  Date: 2017/1/4 
  5.  Time: 15:29 
  6. --%> 
  7. <!DOCTYPE html> 
  8. <html> 
  9. <head> 
  10.  <meta charset="UTF-8"
  11.  <title>videojs demo</title> 
  12.  <link href="video-js-5.15.1/video-js.min.css" rel="stylesheet"
  13.  <script src="video-js-5.15.1/ie8/videojs-ie8.min.js"></script> 
  14.  <script src="video-js-5.15.1/video.min.js"></script> 
  15.  <script src="video-js-5.15.1/lang/zh-CN.js"></script> 
  16.  <script src="video-js-5.15.1/jquery.min.js"></script> 
  17.  <script> 
  18.  videojs.options.flash.swf = "video-js-5.15.1/video-js.swf"
  19.  </script> 
  20. </head> 
  21. <body> 
  22. <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
  23.  <%--字幕文件地址--%> 
  24.  <track src="video-js-5.15.1/examples/elephantsdream/captions.en.vtt" srclang="en" label="English" kind="caption"
  25.  <track src="video-js-5.15.1/examples/elephantsdream/captions.ar.vtt" srclang="zh-cn" label="简体中文" kind="caption" 
  26.  default
  27. </video> 
  28. <input type="button" onclick="state('play')" value="开始"
  29. <input type="button" onclick="state('pause')" value="暂停"
  30. <% 
  31.  String mp4 = request.getParameter("mp4"); 
  32.  String picture = request.getParameter("picture"); 
  33. %> 
  34. <script type="text/javascript"
  35.  var myvideo; 
  36.  function videojs_run() { 
  37.  var mp4 = "<%=mp4%>"
  38.  var picture = "<%=picture%>"
  39.  //播放类型支持,mp4、webm、ogg 
  40.  myvideo = videojs('my-video', { 
  41.  plugins: {//调用插件 
  42. // examplePlugin: {exampleOption: false
  43.  }, 
  44.  language: "zh-CN"
  45.  loop: false,//循环播放 
  46.  autoplay: false,//自动播放 
  47. // width: "1270",//宽度 
  48. // height: "663",//高度 
  49.  poster: picture,//静态封面 
  50.  }, function () { 
  51.  // 播放器初始化后回调 
  52.  this.src(mp4); 
  53.  // this.play();//播放 
  54.  // this.pause();//暂停 
  55.  this.volume(0.3); 
  56. // this.load(); 
  57.  }); 
  58.  } 
  59.  function state(val) { 
  60.  if (val == "play") { 
  61.  myvideo.play(); 
  62.  } else if (val == "pause") { 
  63.  myvideo.pause(); 
  64.  } 
  65.  } 
  66.  /** 
  67.  * 编辑插件 
  68.  * @param options 
  69.  */ 
  70.  function examplePlugin(options) { 
  71.  this.on('play'function (e) { 
  72.  alert('playback has started!'); 
  73.  }); 
  74.  this.on('pause'function (e) { 
  75.  alert('pause has started!'); 
  76.  }); 
  77.  } 
  78.  //注册插件 
  79.  videojs.plugin('examplePlugin', examplePlugin); 
  80.  
  81.  $(function () { 
  82.  videojs_run(); 
  83.  }); 
  84. </script> 
  85. </body> 
  86. </html> 

【本文是51CTO专栏作者张勇波的原创文章,转载请通过51CTO获取作者授权】

戳这里,看该作者更多好文

责任编辑:武晓燕 来源: 51CTO专栏
相关推荐

2019-04-04 14:05:20

consolejs前端

2023-07-24 13:22:35

VideoHTML5Web

2012-02-06 10:36:04

Node.js

2018-06-11 14:39:57

前端脚手架工具node.js

2018-08-30 16:08:37

Node.js脚手架工具

2021-01-11 08:00:00

工具软件视频

2010-10-09 11:01:31

JS

2012-05-15 15:35:48

android

2012-05-02 13:53:00

JavaScript

2012-04-20 11:07:12

Titanium

2009-10-10 09:57:58

使用RHEL合法

2021-09-11 19:04:38

.NetSoapCore协议

2015-07-30 09:42:35

云计算云服务iBM

2009-09-08 09:24:50

LINQ查询

2009-09-23 10:15:23

Linux curlLinux命令行工具

2020-05-07 10:18:06

JavaScript前端技术

2017-08-24 14:55:55

神经网络synaptic浏览器

2010-08-29 21:17:48

DHCP中继

2021-08-25 17:03:09

模型人工智能PyTorch

2021-08-20 14:27:50

鸿蒙HarmonyOS应用
点赞
收藏

51CTO技术栈公众号