基于video.js 的在线播放功能
生活随笔
收集整理的這篇文章主要介紹了
基于video.js 的在线播放功能
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? 因為在此次項目中需要實現在線播放視頻的效果. 所以上網百度了一下相關的插件, 最后決定選用基于html5的video.js插件來實現.
video.js也是開源免費的，下載十分方便.?
以下是官網上給出的簡單使用方法, 因為我們只是要求能在線播放就行, 對其他樣式什么的要求不大,所以
這個簡單例子就足夠用了.
<!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
然后就是將其轉化為相應的視頻流,寫入到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);
總結
以上是生活随笔為你收集整理的基于video.js 的在线播放功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： R语言 eval parse 字符串内有
- 下一篇： 精美的wordpress企业主题模板