video.min.js做視訊播放
阿新 • • 發佈:2019-02-03
需要引的外掛: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自帶的播放器支援很多格式的視訊。。。不知道有人用過沒