自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

video.js簡(jiǎn)單使用

作者：張勇波
開發(fā) 開發(fā)工具
Video.js 是一個(gè)通用的在網(wǎng)頁上嵌入視頻播放器的 JS 庫。Video.js 自動(dòng)檢測(cè)瀏覽器對(duì) HTML5 的支持情況，如果不支持 HTML5 則自動(dòng)使用 Flash 播放器。通過相關(guān)js可支持IE8，IE9及以上本就支持h5。

Video.js 是一個(gè)通用的在網(wǎng)頁上嵌入視頻播放器的 JS 庫。Video.js 自動(dòng)檢測(cè)瀏覽器對(duì) HTML5 的支持情況，如果不支持 HTML5 則自動(dòng)使用 Flash 播放器。通過相關(guān)js可支持IE8，IE9及以上本就支持h5。

插件支持自定義組建按鈕(個(gè)人測(cè)試5.0及以上版本自定義按鈕失效)，支持視頻靜態(tài)圖片指定等。

 

[[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="簡(jiǎn)體中文" 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: {//調(diào)用插件 
  42. // examplePlugin: {exampleOption: false} 
  43.  }, 
  44.  language: "zh-CN", 
  45.  loop: false,//循環(huán)播放 
  46.  autoplay: false,//自動(dòng)播放 
  47. // width: "1270",//寬度 
  48. // height: "663",//高度 
  49.  poster: picture,//靜態(tài)封面 
  50.  }, function () { 
  51.  // 播放器初始化后回調(diào) 
  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.  //注冊(cè)插件 
  79.  videojs.plugin('examplePlugin', examplePlugin); 
  80.  
  81.  $(function () { 
  82.  videojs_run(); 
  83.  }); 
  84. </script> 
  85. </body> 
  86. </html> 

【本文是51CTO專欄作者張勇波的原創(chuàng)文章，轉(zhuǎn)載請(qǐng)通過51CTO獲取作者授權(quán)】

戳這里，看該作者更多好文

責(zé)任編輯：武曉燕 來源： 51CTO專欄
video使用JS庫
相關(guān)推薦

2019-04-04 14:05:20

consolejs前端

2023-07-24 13:22:35

VideoHTML5Web

2012-02-06 10:36:04

Node.js

2018-08-30 16:08:37

Node.js腳手架工具

2018-06-11 14:39:57

前端腳手架工具node.js

2010-10-09 11:01:31

JS

2012-05-02 13:53:00

JavaScript

2021-01-11 08:00:00

工具軟件視頻

2015-07-30 09:42:35

云計(jì)算云服務(wù)iBM

2009-09-23 10:15:23

Linux curlLinux命令行工具

2009-09-08 09:24:50

LINQ查詢

2012-04-20 11:07:12

Titanium

2009-10-10 09:57:58

使用RHEL合法

2021-09-11 19:04:38

.NetSoapCore協(xié)議

2020-05-07 10:18:06

JavaScript前端技術(shù)

2017-08-24 14:55:55

神經(jīng)網(wǎng)絡(luò)synaptic瀏覽器

2012-05-15 15:35:48

android

2017-01-05 13:31:33

Lisp加法運(yùn)算

2013-03-28 16:31:48

AIDL的簡(jiǎn)單使用Android中AID

2021-06-30 07:19:36

Netty簡(jiǎn)單使用
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)