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

VMare1 2013-10-08 02:13:46
在<video type="video/mp4" src="" ></video>中如何将本地视频如d:\video\test.mp4的视频作为请求getVideo.do?fileId=xxx赋给src。中间的java请求代码方法如何处理本地视频后给浏览器的src呢？现在只能是播放web目录下的视频，如何实现本地视频播放呢？
...全文
40891 30 打赏 收藏 转发到动态 举报
写回复
用AI写文章
30 条回复
切换为时间正序
请发表友善的回复…
发表回复
qq_23518899 2016-05-31
  • 打赏
  • 举报
 回复
我也有同样的问题，楼主怎么解决的
小蔡先生` 2016-01-27
  • 打赏
  • 举报
 回复
引用 28 楼 caishoubin0828 的回复:
楼主，解决问题了么？ 我们公司也有这种需求 也是无法拖拽 ，而且这样实现对读取大文件视频有问题。。
服务端内存消耗太大，得需要分段处理么？
小蔡先生` 2016-01-27
  • 打赏
  • 举报
 回复
楼主，解决问题了么？ 我们公司也有这种需求 也是无法拖拽 ，而且这样实现对读取大文件视频有问题。。
sinat_24128331 2014-12-02
  • 打赏
  • 举报
 回复
response header中携带accept-ranges:bytes后以视频即可手动重复播放，如果要自动重复播放则在video标签上增加 loop属性
这是一个账号007 2014-10-21
  • 打赏
  • 举报
 回复
引用 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文件 并播放，怎么处理？
原来缘来 2014-01-08
  • 打赏
  • 举报
 回复
先把文件传到服务器上,没有别的办法
allali 2014-01-08
  • 打赏
  • 举报
 回复 

<!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>
VMare1 2014-01-08
  • 打赏
  • 举报
 回复
引用 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视频播放,无法做到拖拽和重新播放，怎么处理。
l676331991 2014-01-05
  • 打赏
  • 举报
 回复
这个问题应该到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();
VMare1 2013-12-30
  • 打赏
  • 举报
 回复
引用 17 楼 yl02520 的回复:
刚刚写了一篇播放本地媒体文件的方法，请参看http://blog.csdn.net/yl02520/article/details/15029593
我需要读取服务器上磁盘的文件，不是客户端的视频
尹立 2013-12-30
  • 打赏
  • 举报
 回复
引用 19 楼 VMare1 的回复:
[quote=引用 17 楼 yl02520 的回复:] 刚刚写了一篇播放本地媒体文件的方法，请参看http://blog.csdn.net/yl02520/article/details/15029593
我需要读取服务器上磁盘的文件，不是客户端的视频[/quote] 那你在web目录下创建一个链接，指向目标目录，应该可以满足你的需求，在Linux上是可以工作的，windows上你可以自己试试
尹立 2013-11-10
  • 打赏
  • 举报
 回复 1
刚刚写了一篇播放本地媒体文件的方法，请参看http://blog.csdn.net/yl02520/article/details/15029593
尹立 2013-11-09
  • 打赏
  • 举报
 回复
为了安全起见，浏览器是不能访问本机资源的，包括文件系统，摄像头，话筒等等，除非事先经过了你的允许。这正是浏览器设计的理念哲学。 基于你的这个案例，建议可以在页面中添加一个<input>文件，让用户自己先去选择本机上的视频文件，然后你的网页就可以得到该选择文件的url了，然后把该video节点的src属性修改成url即可。
VMare1 2013-11-01
  • 打赏
  • 举报
 回复
引用 13 楼 kingwolf_JavaScript 的回复:
我只是想说明你的文件无论是视频文件还是视频流都得是服务器上面的，使用浏览器的用户的磁盘你是读取不到的。
对，是的。只是我想实现服务器上项目读取磁盘上的视频给浏览器播放，而非用路径去写，最终实现用请求的方式去读取服务器磁盘上的文件，如uri？id=fileId 赋给viedo src
浴火_凤凰 2013-10-31
  • 打赏
  • 举报
 回复
我只是想说明你的文件无论是视频文件还是视频流都得是服务器上面的，使用浏览器的用户的磁盘你是读取不到的。
VMare1 2013-10-29
  • 打赏
  • 举报
 回复
引用 10 楼 u010719640 的回复:
你写一个html，video标签里面放一个MP4视频，打开就可以播放。除非是格式的问题，对MP4等视频的要求还是很严的
你没看清题目意思吧。。
Deep_Learning 2013-10-29
  • 打赏
  • 举报
 回复
你写一个html，video标签里面放一个MP4视频，打开就可以播放。除非是格式的问题，对MP4等视频的要求还是很严的
VMare1 2013-10-27
  • 打赏
  • 举报
 回复
引用 7 楼 u010914252 的回复:
<video width="500" height="500" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> 您的浏览器不支持此种视频格式。 </video>
这个是基本播放的，不是我需要的。。
VMare1 2013-10-27
  • 打赏
  • 举报
 回复
引用 6 楼 kingwolf_JavaScript 的回复:
[quote=引用 4 楼 VMare1 的回复:] [quote=引用 3 楼 kingwolf_JavaScript 的回复:] 你说的本地视频是指什么？客户端的视频，肯定是不行的。
服务器磁盘上的视频，就是不在项目中[/quote]那就复制到项目中，或者使用相对路径去引用[/quote] 上传的视频不可能都放在项目里面啊，需要程序读取磁盘视频流传给html5 video播放
虎中赤兔 2013-10-25
  • 打赏
  • 举报
 回复
<video width="500" height="500" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> 您的浏览器不支持此种视频格式。 </video>
加载更多回复（6）
HTML5 Video播放本地文件
本人在做项目的时候，有个功能需求需要播放云上的视频和本地磁盘里的视频，播放云上的视频有url直接就能播放，但是播放本地的视频涉及到浏览器跨域的问题，在网上找了很多，但都不能解决我的问题，最后想到了构建流的方式在服务器上播放本地视频。 下面是我在服务器上播放本地视频的效果图 先贴上html5代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&......
html5网页中用video标签无法播放MP4视频的解决方法
今天一位朋友Q我说：为什么我录制的MP4视频在本地可以播放但是使用html5的video多媒体播放标签不能正常播放只有一个进度条而不显示图像？当时我也很好奇MP4视频可以用video标签播放呀，我就经常用，毕竟是好朋友我还是亲自去筛查了一下问题，这不结论处来了，其实就是一个视频编码的问题，格式虽然都是MP4但是html中只支持H.264的编码格式，无奈只能重新转换一下编码了。 为了避免大家遇
使用video.js播放手机本地视频
一、开发背景简介 项目要求调用手机本地相册的视频并在web页面上展示，但是原生的video标签并不能做到很好的兼容性，所以使用第三方库video.js调用手机本地视频并播放。 二、video.js的引入 //在head部分加上以下两行代码即可 <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js....
vue H5使用video播放视频
vue H5使用video播放视频
HTML5 - 使用<video>播放视频
1，下面是一个播放视频的最简单样例 （controls属性告诉浏览器要有基本播放控件）<video src="hangge.mp4" controls>video>2，通过width和height设置视频窗口大小<video src="hangge.mp4" controls width="400" height="300">video>3，预加载媒体文件 设置preload不同的属性值
HTML5

39,084

社区成员

5,548

社区内容

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章