ajax 上传视频 h5及时播放

最新推荐文章于 2024-05-20 16:28:19 发布
最新推荐文章于 2024-05-20 16:28:19 发布
阅读量2.3k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29623951/article/details/53450026
版权
<%@ page trimDirectiveWhitespaces="true" language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" scope="session"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<jsp:include page="../comm/head.jsp"/>
<script type="text/javascript" src="${ctx }/ueditor/ueditor.config.js"></script>
   <script type="text/javascript" src="${ctx }/ueditor/ueditor.all.js"></script>
   <script type="text/javascript" src="${ctx }/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" src="${ctx }/static/ajaxfileupload.js"></script>
   <script type="text/javascript" src="${ctx }/static/imglimit.js"></script> 
</head>
<body>
<jsp:include page="../comm/topnav.jsp"/>
<div class="container">
<div class="row">
<div class="col-sm-12">
<jsp:include page="../comm/breadcrumb.jsp"/> 
<!-- <input type=file id="appFile" name="appFile" οnchange="getValue();" style="-moz-opacity:0;filter:alpha(opacity=0);opacity:0;position:absolute;left:166px;" />  
<input id="appFilename" style="color: green;border: 1px solid green;width:300px;" />  
<input type="button" value="File" style="border: 1px solid green;width:80px;" /> 
        <input  type="button" value="提交" οnclick="add();"> -->
<form class="form-horizontal" action="${ctx }/video/save" method="post" id="messageForm">
<div class="form-group">   
<label class="col-sm-2 control-label" for="appFile">图片：</label>
<div class="col-sm-5">
<input id="appFile" name="appFile" οnchange="document.getElemen
最低0.47元/天 解锁文章
qq_29623951
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax视频拖拽上传（完善版）
json_li的博客
04-18 2578
在前辈的基础上，进行了一些完善 功能：可实现拖拽上传视频，有进度条显示，MP4格式的视频还可实现在线播放， 进行了视频上传格式限制，格式不符合有提示不能上传，大小可按情况自行添加限制 最重要的是实现了大文件断点续传的功能，更详细功能可下载后体验，就不一 一赘述了 首先，创建一个index.html页面 注释代码中很详细，html代码如下：
ajax异步刷新例子—播放视频
李晓娜
01-02 3047
不论是看电视剧还是新闻之类的视频，出于读者或者用户的某种对于视频的感受，我们可以点击一下发表一下自己的意见，比如说博客上的“顶”或者“赞”，“踩”，影视剧的评判“赞”，“踩”等等，还有优酷、土豆视频播放器下面的发表评论等等都是我们常见的东西。     细心的你可能会发现，当我们点击赞、踩或者发现评论的时候页面并不会全部刷新或者说页面重新加载，只是赞或者踩的次数加一又或者评论的数目加多并且发布出来
hls.js实现分片播放视频
最新发布
qq_52335038的博客
05-20 671
hls.js实现分片下载视频并播放
原生Ajax处理文件流
如诗
05-23 1815
在通过Ajax处理请求时，可能会遇到需要下载文件的情况，这里简要的说明下处理方法。 let downloadFile = document.getElementById("downloadImportInfo"); let fileUrl = "D:/test.xlsx"; // ajax获取到的文件地址 downloadFile.onclick = function () { const xhr = new XMLHttpRequest(); let url = "localhost:.
ajax视频播放,XMLHttpRequest加载视频并播放
weixin_33246707的博客
08-06 1323
XMLHttpRequest加载视频文件2进制数据流到客户端，并使用video控件播放。结合XMLHttpRequest Level 2特性，可以使用XMLHttpRequest对象接受服务器端返回的2进制数据流，然后使用生成blob对象，URL.createObjectURL生成文件引用路径赋值给video标签即可播放。XMLHttpRequest加载视频并播放源代码如下protected vo...
java大文件(百M以上)的上传下载实例
weixin_45525177的博客
09-15 522
1、介绍enctype enctype属性规定发送到服务器之前应该如何对表单数据进行编码。 enctype作用是告知服务器请求正文的MIME类型（请求消息头content-type的作用一样） 1、1 enctype的取值有三种 值 描述 application/x-www-form-urlencoded 在发送前编码所有字符（默认） multipart/form-data 不对字符编.
漂亮的H5+Ajax文件上传页模版_完美兼容浏览器
02-22
1.可用于移动端H5 2.可用于小程序webview，用于替代wx.uploadFile的技术方案 3.PHP服务端文件接收请使用$_FILES 4.设置的格式支持MP3,WAV可自己调整 5.如果后端接收到的tmp_name为空，请检查服务端允许上传的文件...
php+ajax+h5实现图片上传功能
10-19
在本文中，我们将深入探讨如何使用PHP、AJAX 和 HTML5（H5）来实现一个图片上传的功能。这个功能允许用户在不刷新整个网页的情况下上传图片，并通过服务器端的PHP处理上传请求，最后将结果反馈回客户端。 首先，让...
利用AJAX开源项目 在网页里播放视频实现方法
10-30
下载videobox 1.1.zip把它解压到asp.net项目的目录下，并用“Add New Item”新建一个Html文件用以播放视频。
ajax 异步上传带进度条视频并提取缩略图
12-09
需要上传视频。这里我希望做成异步上传，并且有进度条，响应有状态码，视频连接，缩略图。 服务端响应 { "thumbnail": "/slsxpt//upload/thumbnail/fdceefc.jpg", "success": true, "link": "/slsxpt//upload/...
jQuery实现视频播放功能
07-16
利用jQuery实现视频播放功能。目前只能实现MP4格式的播放功能
Ajax轮询 传输视频
weixin_37595711的博客
08-05 789
需要做一个智能家居的项目，室内的温度，湿度，光照，实时以及视频传输。采用方案，H5和java组合做客户端(app)，硬件用C去实现。正好我做客户端。。 H5 是用mui。。java用的是springBoot的WebFlux app端 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt;...
前后端分离ajax接收文件流的实践
热门推荐
leason的博客
10-29 2万+
一般ajax，post请求不能实现的原因 开始的想法：在页面上用jQuery的$.post方法发送一个请求给服务器，然后服务器根据这个参数再生成相应的一个文件流返回给客户端。但是，在$.post方法的回调函数中，只能处理xml, json, script, or html类型，对返回的文件流却没办法弹出对话框让用户下载了。 另类实现方法 经过百度，看到了很多人采用隐藏form提交
前台ajax 从后台获取文件流上传文件
ym563099457的博客
11-02 9544
前台ajax请求 后台接收请求  读取某个文件夹下的文件 @ResponseBody     public void getPic(HttpServletRequest request,HttpServletResponse response,@RequestParam("path") String path) throws IOException {         path = pat...
ajax 链接java,通过ajax请求从Java servlet流传输实时视频提要的正确方法
weixin_28813763的博客
02-28 125
Im currently creating a custom surveillance application. And i was curious is it possible to take the live stream and and redirect it to a webpage via an ajax request. If so whats an example of how th...
html5 Ajax 访问.net WebApi获取视频流
weixin_34023863的博客
05-29 599
http://localhost//api/Test/GetVideo?filename=/GoodVideo/e36a144b-52cd-4174-93d2-cfc41aea6c1d.mp4 是API地址加上视频路径，此地址一般是动态获取 <video id="video" style="width:100%;" controls="controls" preload="prel...
ajax提交用流的方式,ajax 请求 后台返回的文件流
weixin_30613479的博客
08-05 3505
download(url) {var xhr = new XMLHttpRequest();xhr.open('GET', url, true); // 也可以使用POST方式，根据接口xhr.responseType = "blob"; // 返回类型blob// 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑xhr.onload = function () {// 请...
h5上传视频html代码
07-01
### 回答1： HTML5提供了一个很方便的方式来实现视频上传功能。以下是一个简单的H5上传视频的HTML代码示例： ``` <!DOCTYPE html> <html> <head> <title>H5上传视频</title> <style> #upload { display: none; } #upload-label { border: 2px dashed #aaa; padding: 20px; cursor: pointer; } #video-preview { width: 400px; } </style> </head> <body> <h1>H5上传视频示例</h1> <label for="upload" id="upload-label">点击选择视频文件</label> <input type="file" id="upload" accept="video/*" /> <video id="video-preview" controls></video> <script> const uploadLabel = document.getElementById('upload-label'); const uploadInput = document.getElementById('upload'); const videoPreview = document.getElementById('video-preview'); uploadInput.addEventListener('change', function(event) { const file = event.target.files[0]; const fileReader = new FileReader(); fileReader.onload = function(event) { const videoUrl = event.target.result; videoPreview.src = videoUrl; } fileReader.readAsDataURL(file); }); </script> </body> </html> ``` 这段代码实现了一个由“点击选择视频文件”的标签组成的上传界面，用户点击该标签后会弹出系统的文件选择窗口。选择视频文件后，上传的视频会被显示在页面上的一个带有控制条的视频播放器中。 具体实现的步骤如下： 1. 通过CSS样式将上传按钮隐藏，仅展示一个带有虚线边框且带有鼠标样式为指针的标签。 2. 通过JavaScript获取到上传按钮和视频预览的DOM元素。 3. 给上传按钮添加一个change事件监听器。 4. 在事件处理程序内，获取用户选择的视频文件。 5. 使用`FileReader`对象将选中文件读取为`DataURL`格式。 6. 将读取到的视频URL赋值给视频预览的`src`属性，从而实现视频的预览。 ### 回答2： <h5>上传视频</h5> <form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="video" id="video"> <input type="submit" value="上传"> </form> 在这段HTML代码中，使用了h5标签来定义一个标题，标题内容为“上传视频”。 接下来，创建一个表单，指定了数据提交的地址为"upload.php"，提交的方式为POST，并指定表单的编码类型为"multipart/form-data"，以支持文件上传。 在表单中，使用了<input>元素来创建一个"文件"类型的输入框，给该输入框命名为"video"，同时指定了一个唯一的id属性为"video"。 最后，添加一个<input>元素，来创建一个"提交"按钮，并将该按钮显示为"上传"。 用户可以通过点击"上传"按钮，选择文件并将其上传到服务器上。 ### 回答3： 当我们在网页中想要实现视频上传功能时，可以使用HTML5提供的File API来实现。以下是一个简单的H5上传视频的HTML代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>H5上传视频</title> </head> <body> <input type="file" id="videoUpload" accept="video/*" /> <button onclick="uploadVideo()">上传视频</button> <script> function uploadVideo() { var videoFile = document.getElementById("videoUpload").files[0]; if (videoFile) { var formData = new FormData(); formData.append("video", videoFile); // 在这里添加处理上传视频的代码，可以是通过AJAX发送到服务器进行处理或其他具体操作 console.log("视频上传成功！"); } else { console.log("请选择要上传的视频文件！"); } } </script> </body> </html> ``` 在上面的代码中，我们首先创建了一个文件上传输入框，指定了其类型为"file"，并通过`accept`属性限制只能选择视频文件进行上传。接着，我们添加了一个按钮，点击该按钮会触发`uploadVideo`函数。在该函数中，我们通过`getElementById`方法获取到用户选择的视频文件，然后使用FormData将该文件添加到表单数据中。接下来，我们可以通过AJAX将该表单数据发送到服务器进行处理，或者根据实际需求进行具体的操作。在上传完成后，我们可以在控制台输出 "视频上传成功！"。若用户没有选择任何视频文件，则会输出 "请选择要上传的视频文件！"。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值