1. 程式人生 > >video.min.js做視訊播放

video.min.js做視訊播放

需要引的外掛:video.min.js video-js.min.css

這個外掛支援三種視訊格式:mp4、webm、ogg

===============================================================================================================================

最簡單的小例子,程式碼如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title
>
網頁版視訊播放器</title> <link href="css/video-js.min.css" rel="stylesheet"> <script src="js/video.min.js"></script> </head> <body> <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" data-setup="{}"> <source
src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
</body> </html>

===============================================================================================================================
如果取到的路徑是全路徑(類似D:\apache-tomcat-7.0.56\webapps\portal_iot\upload/upload_20160924161508.mp4這樣)的話,可以使用下面方法擷取路徑:

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="870" height="350" data-setup="{}">
    <source src="${ctx}/${fn:replace(notice.attachmentAddr,pageContext.request.getRealPath("/"),"")}" type='video/mp4' />
    <source src="${ctx}/${fn:replace(notice.attachmentAddr,pageContext.request.getRealPath("/"),"")}" type='video/webm' />
    <source src="${ctx}/${fn:replace(notice.attachmentAddr,pageContext.request.getRealPath("/"),"")}" type='video/ogg' />
</video>

===============================================================================================================================

順便提一句,好像HTML自帶的播放器支援很多格式的視訊。。。不知道有人用過沒