html5的video视频播放，如何使用本地视频播放

在<video type="video/mp4" src="" ></video>中如何将本地视频如d:\video\test.mp4的视频作为请求getVideo.do?fileId=xxx赋给src。中间的java请求代码方法如何处理本地视频后给浏览器的src呢？现在只能是播放web目录下的视频，如何实现本地视频播放呢？

30 个解决方案

#1

没弄过，还没研究那么深。

#2

引用 1 楼 mdpmw 的回复:

没弄过，还没研究那么深。

我也是刚接触。。项目中有用到，找到一种折中的方法，我的服务器是tomcat，在server.xml配置本地路径域名可以访问资源、不过这不是最终想要的。

#3

你说的本地视频是指什么？客户端的视频，肯定是不行的。

#4

引用 3 楼 kingwolf_JavaScript 的回复:

你说的本地视频是指什么？客户端的视频，肯定是不行的。

服务器磁盘上的视频，就是不在项目中

#5

google
html5  video

#6

引用 4 楼 VMare1 的回复:

Quote: 引用 3 楼 kingwolf_JavaScript 的回复:

你说的本地视频是指什么？客户端的视频，肯定是不行的。

服务器磁盘上的视频，就是不在项目中

那就复制到项目中，或者使用相对路径去引用

#7

<video width="500" height="500" controls="controls"> 
<source src="movie.ogg" type="video/ogg"> 
<source src="movie.mp4" type="video/mp4"> 
您的浏览器不支持此种视频格式。 
</video> 

#8

引用 6 楼 kingwolf_JavaScript 的回复:

Quote: 引用 4 楼 VMare1 的回复:

Quote: 引用 3 楼 kingwolf_JavaScript 的回复:

你说的本地视频是指什么？客户端的视频，肯定是不行的。

服务器磁盘上的视频，就是不在项目中

那就复制到项目中，或者使用相对路径去引用

上传的视频不可能都放在项目里面啊，需要程序读取磁盘视频流传给html5 video播放

#9

引用 7 楼 u010914252 的回复:

<video width="500" height="500" controls="controls"> 
<source src="movie.ogg" type="video/ogg"> 
<source src="movie.mp4" type="video/mp4"> 
您的浏览器不支持此种视频格式。 
</video> 

这个是基本播放的，不是我需要的。。

#10

你写一个html，video标签里面放一个MP4视频，打开就可以播放。除非是格式的问题，对MP4等视频的要求还是很严的

#11

引用 10 楼 u010719640 的回复:

你写一个html，video标签里面放一个MP4视频，打开就可以播放。除非是格式的问题，对MP4等视频的要求还是很严的

你没看清题目意思吧。。

#12

该回复于2013-10-29 16:22:35被管理员删除

#13

我只是想说明你的文件无论是视频文件还是视频流都得是服务器上面的，使用浏览器的用户的磁盘你是读取不到的。

#14

引用 13 楼 kingwolf_JavaScript 的回复:

我只是想说明你的文件无论是视频文件还是视频流都得是服务器上面的，使用浏览器的用户的磁盘你是读取不到的。

对，是的。只是我想实现服务器上项目读取磁盘上的视频给浏览器播放，而非用路径去写，最终实现用请求的方式去读取服务器磁盘上的文件，如uri？id=fileId 赋给viedo src

#15

该回复于2013-11-03 08:51:05被管理员删除

#16

为了安全起见，浏览器是不能访问本机资源的，包括文件系统，摄像头，话筒等等，除非事先经过了你的允许。这正是浏览器设计的理念哲学。

基于你的这个案例，建议可以在页面中添加一个<input>文件，让用户自己先去选择本机上的视频文件，然后你的网页就可以得到该选择文件的url了，然后把该video节点的src属性修改成url即可。

#17

刚刚写了一篇播放本地媒体文件的方法，请参看 http://blog.csdn.net/yl02520/article/details/15029593

#18

该回复于2013-12-03 15:46:13被管理员删除

#19

引用 17 楼 yl02520 的回复:

刚刚写了一篇播放本地媒体文件的方法，请参看 http://blog.csdn.net/yl02520/article/details/15029593

我需要读取服务器上磁盘的文件，不是客户端的视频

#20

引用 19 楼 VMare1 的回复:

Quote: 引用 17 楼 yl02520 的回复:

刚刚写了一篇播放本地媒体文件的方法，请参看 http://blog.csdn.net/yl02520/article/details/15029593

我需要读取服务器上磁盘的文件，不是客户端的视频

那你在web目录下创建一个链接，指向目标目录，应该可以满足你的需求，在Linux上是可以工作的，windows上你可以自己试试

#21

这个问题应该到java版本去问吧。
我觉得可行，和生成验证码一个道理，给你百度了一个，原理很简单，先设置好正确的响应报头，然后获取http输出流，然后读取mp4文件，将文件字节数据输出到http的响应流中去就ok啦。etag神马的其实是为HTTP缓存考虑的。

   byte[] data = getBytesFromFile(new File("D:/media/final.mp4"));
   String diskfilename = "final.mp4";
   response.setContentType("video/mp4");
   //response.setContentType("application/octet-stream");
   response.setHeader("Content-Disposition", "attachment; filename=\"" + diskfilename + "\"" );
   System.out.println("data.length " + data.length);
   response.setContentLength(data.length);
   response.setHeader("Content-Range", range + Integer.valueOf(data.length-1));
   response.setHeader("Accept-Ranges", "bytes");
   response.setHeader("Etag", "W/\"9767057-1323779115364\"");
   byte[] content = new byte[1024];
   BufferedInputStream is = new BufferedInputStream(new ByteArrayInputStream(data));
   OutputStream os = response.getOutputStream();
   while (is.read(content) != -1) {              
    os.write(content);             
   }
   is.close();
   os.close(); 

#22

引用 21 楼 l676331991 的回复:

这个问题应该到java版本去问吧。
我觉得可行，和生成验证码一个道理，给你百度了一个，原理很简单，先设置好正确的响应报头，然后获取http输出流，然后读取mp4文件，将文件字节数据输出到http的响应流中去就ok啦。etag神马的其实是为HTTP缓存考虑的。

   byte[] data = getBytesFromFile(new File("D:/media/final.mp4"));
   String diskfilename = "final.mp4";
   response.setContentType("video/mp4");
   //response.setContentType("application/octet-stream");
   response.setHeader("Content-Disposition", "attachment; filename=\"" + diskfilename + "\"" );
   System.out.println("data.length " + data.length);
   response.setContentLength(data.length);
   response.setHeader("Content-Range", range + Integer.valueOf(data.length-1));
   response.setHeader("Accept-Ranges", "bytes");
   response.setHeader("Etag", "W/\"9767057-1323779115364\"");
   byte[] content = new byte[1024];
   BufferedInputStream is = new BufferedInputStream(new ByteArrayInputStream(data));
   OutputStream os = response.getOutputStream();
   while (is.read(content) != -1) {              
    os.write(content);             
   }
   is.close();
   os.close(); 

这种方式的html5视频播放,无法做到拖拽和重新播放，怎么处理。

#23

<!DOCTYPE>
<html>
<head>
    <title> Test </title>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <style type="text/css">
        input,video{
            display: block;
        }
    </style>
    <script type="text/javascript">
        function createObjectURL(object) {
            return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
        }
        function play(){
            if(this.files.length) {
                video.src = (window.URL) ? window.URL.createObjectURL(this.files[0]) : window.webkitURL.createObjectURL(this.files[0]);
            }
        }
    </script>
</head>
<body>
<input type="file" id="file" onchange="play.call(this);"/>
    <video controls autoplay id="video" width="320" height="240" controls>
        Your browser does not support the video tag.
    </video>
</body>
<script>
    var video = document.getElementById("video");
</script>
</html>

#24

先把文件传到服务器上,没有别的办法

#25

该回复于2014-01-09 08:18:43被管理员删除

#26

引用 23 楼 MengYouXuanLv 的回复:

<!DOCTYPE>
<html>
<head>
    <title> Test </title>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <style type="text/css">
        input,video{
            display: block;
        }
    </style>
    <script type="text/javascript">
        function createObjectURL(object) {
            return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
        }
        function play(){
            if(this.files.length) {
                video.src = (window.URL) ? window.URL.createObjectURL(this.files[0]) : window.webkitURL.createObjectURL(this.files[0]);
            }
        }
    </script>
</head>
<body>
<input type="file" id="file" onchange="play.call(this);"/>
    <video controls autoplay id="video" width="320" height="240" controls>
        Your browser does not support the video tag.
    </video>
</body>
<script>
    var video = document.getElementById("video");
</script>
</html>

这个是什么意思？本地访问局域网的一个MP4文件  并播放，怎么处理？

#27

response header中携带accept-ranges:bytes后以视频即可手动重复播放，如果要自动重复播放则在video标签上增加 loop属性

#28

楼主，解决问题了么？ 我们公司也有这种需求 也是无法拖拽 ，而且这样实现对读取大文件视频有问题。。

#29

引用 28 楼 caishoubin0828 的回复:

楼主，解决问题了么？ 我们公司也有这种需求 也是无法拖拽 ，而且这样实现对读取大文件视频有问题。。

服务端内存消耗太大，得需要分段处理么？

#30

我也有同样的问题，楼主怎么解决的