当前位置: 首页 > 工具软件 > moovie.js > 使用案例 >

video.min.js做视频播放

曾歌者
2023-12-01

需要引的插件: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自带的播放器支持很多格式的视频。。。不知道有人用过没

 类似资料: