基於video.js 的線上播放功能
阿新 • • 發佈：2019-01-24
因為在此次專案中需要實現線上播放視訊的效果. 所以上網百度了一下相關的外掛, 最後決定選用基於html5的video.js外掛來實現.
video.js也是開源免費的，下載十分方便.
- 下載之後解壓, 主要用到的資原始檔是 video.js , video-js.min.css.在html 或 jsp頁面首先匯入這兩個資原始檔
<link href="${rc.contextPath}/statics/css/video-js.min.css" rel="stylesheet"> <script src="${rc.contextPath}/statics/libs/video.min.js"></script>
以下是官網上給出的簡單使用方法, 因為我們只是要求能線上播放就行, 對其他樣式什麼的要求不大,所以
這個簡單例子就足夠用了.
<!DOCTYPE HTML> <html> <head> <title>Video.js Test Suite</title> <link href="//vjs.zencdn.net/4.10/video-js.css" rel="stylesheet"> <script src="//vjs.zencdn.net/4.10/video.js"></script> </head> <body> <video id="example_video_1" class="video-js vjs-default-skin" controls width="640" height="264"> <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> </video> </body> </html>
因為是web專案播放的視訊肯定是在伺服器中的,上述例子中主要是根據source的src找到資源的播放
地址,從而進行播放.
所以首先要找到的就是伺服器上，視訊的相對地址.這點非常容易實現,下面這樣應該就能獲取到的
視訊的path
String path = request.getSession().getServletContext().getRealPath("/");
path = path + "resources\\" + "";然後就是將其轉化為相應的視訊流,寫入到reponse中,返回請求.下面是此方法的完整程式碼
@RequestMapping("/getVideo") public void getVideo(HttpServletRequest request, HttpServletResponse response) { String transcode = request.getParameter("transcode"); String path = request.getSession().getServletContext().getRealPath("/"); path = path + "resources\\" + transcode + "\\videos\\1\\"; File file0 = new File(path); File[] fielList = file0.listFiles(); String fileName = null; for(int i = 0; i < fielList.length; i++){ fileName = fielList[i].getName(); } path = path + fileName; File file = new File(path); InputStream in = null; ServletOutputStream out = null; try { in = new FileInputStream(file); out = response.getOutputStream(); byte[] buffer = new byte[4 * 1024]; int length; while ((length = in.read(buffer)) > 0) { out.write(buffer, 0, length); } } catch (FileNotFoundException e) { System.out.println("檔案讀取失敗,檔案不存在"); e.printStackTrace(); } catch (IOException e) { System.out.println("檔案流輸出異常"); e.printStackTrace(); } finally { try { in.close(); out.close(); } catch (IOException e) { System.out.println("檔案流關閉異常"); e.printStackTrace(); } } }
最後一步就是設定src的值通過請求呼叫controller中的此方法，從而實現線上播放視訊的效果.因為專案
用的是html頁面，不是jsp頁面所以只能在js中實現請求controller的方法.
一開始的想法本來是直接將src設定為相對應的請求方法, 但是並沒有達到預期效果, 後來將src地址寫死測，試了一下,是可以播放的. 所以方法應該是正確的,
但可能是頁面初始化或其他的原因, 導致並沒有呼叫相應的方法。
$("#my-player").find("source").attr("src", "/zhzf/videomanage/getVideo?transcode=" + transcode);接著又試了幾種其他的方法, 也沒能成功實現. 最後直接用jQuery將頁面上對應的那段html程式碼直接在js中賦值,成功實現了效果。
var modalContent = '<video id="my-player" style="width: 996px; height:600px;" class="video-js" controls preload="auto" poster="" data-setup="{}">'
+ '<source src="/zhzf/videomanage/getVideo?transcode=' + transcode + '" type="video/mp4">'
+ '</source><p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that'
+ '<a href="#" target="_blank">supports HTML5 video</a></p></video>';
$('#videoModal').html(modalContent);