播放视频
HTML <video> 元素 用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放
<video controls width="250">
<source src="/media/cc0-videos/flower.webm"
type="video/webm">
<source src="/media/cc0-videos/flower.mp4"
type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
对视频截图（拍照）
通过canvas 来对正在视频截图，即在 canas 上绘制 video 标签内的视频图像，然后 使用 canvas.toDataURL() 方法输出 base64 文本描述的图像。
canvas.toDataURL()方法返回一个包含图片展示的 data URI 。默认为 PNG 格式。图片的分辨率为96dpi。文本以“data:image/png”开头
var canvas = document.createElement("canvas");
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvas.getContext('2d')
.drawImage(video, 0, 0, canvas.width, canvas.height);
var img = document.createElement("img");
//console.log(canvas.toDataURL());
//方法返回一个包含图片展示的 data URI 。默认为 PNG 格式。图片的分辨率为96dpi
img.src = canvas.toDataURL();
$output.prepend(img);
将对视频拍照的图片保存到本地
简单来说就是创建一个隐藏的link 标签，补充它的属性，在点击它。
//下面是保存到 本地的方法
var link = document.getElementById('link');
link.setAttribute('download', 'img_.png');
link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
link.click();
将拍照后的base64 图片上传到后台
前端代码如下：
//下面是 上传的方法
//删除字符串前的提示信息 "data:image/png;base64,"
var data = canvas.toDataURL();
var img_base64 = data.substring(22);
$.ajax({type:"POST", url: "/uploadfile", data: { data: img_base64, name: 'file' }, success:
function (){
$output.prepend("upload done!");
}
});
};
接收图片的后端代码
/**
* @description:
* @author: zhangyunfei
* @date: 2021/4/25 19:22
*/
@RestController
@RequestMapping()
public class UploadFileController {
public static final String IMAGE_STORE_DIR = "/Users/zhangyunfei/Downloads/video/public";
private static final String TAG = UploadFileController.class.getSimpleName();
@PostMapping(value = "/uploadfile", name = "接收上传文件")
public String cleanAlarm(String name, String data) {
LogUtil.d(TAG, "name=%s, data=%s", name, data);
saveFile(data);
return "ok";
}
private void saveFile(String data) {
try {
Base64.Decoder decoder = Base64.getDecoder();
byte[] bytes1 = decoder.decode(data);
String fileName = UUID.randomUUID().toString() + ".png";
File path = new File(IMAGE_STORE_DIR, fileName);
FileOutputStream writer = new FileOutputStream(path);
writer.write(bytes1);
writer.close();
LogUtil.d(TAG, "## 保存文件成功，路径=%s", path.getPath());
} catch (IOException e) {
e.printStackTrace();
LogUtil.d(TAG, "## 保存文件失败，%s", e);
}
}
附录
- 示例说明地址：https://www.jianshu.com/p/75b20f7668b3
- 示例代码地址：https://github.com/vir56k/demo/blob/master/video2/public/index3.html
补充：后端准备一个mp4的视频源并设置静态资源访问
后端采用java实现，首先准备一个 mp4 的视频文件。新建一个springboot 工程，将 某个文件夹映射为静态资源目录，代码如下。
@Configuration
public class ResourceConfig {
private static final String TAG = "## ResourceConfig";
// 图片URL 路径映射的 根
public static final String IMAGE_PATH_PATTERNS = "/img";
public static final String IMAGE_STORE_DIR = "/Users/zhangyunfei/Downloads/video/public";
public ResourceConfig() {
LogUtil.d(TAG, "instance !");
}
@Bean
public WebMvcConfigurer resourceConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
// 将整个 img 文件配置成静态资源
String pathPatterns = IMAGE_PATH_PATTERNS + "/**";
String locations = "file:" + IMAGE_STORE_DIR + "//";
registry.addResourceHandler(pathPatterns)
.addResourceLocations(locations);
LogUtil.d(TAG, "## 静态资源路径映射：%s --> %s", pathPatterns, locations);
}
};
}
}
补充：最后贴出完整的前端代码
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
let $output, video;
let scale = 1;// 控制 图片的缩放比率
var initialize = function() {
$output = $("#output");
video = $("#video").get(0);
$("#capture").click(captureImage);
};
var captureImage = function(){
console.log("video.videoWidth=%s, video.videoHeight=%s",video.videoWidth,video.videoHeight)
var canvas = document.createElement("canvas");
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvas.getContext('2d')
.drawImage(video, 0, 0, canvas.width, canvas.height);
var img = document.createElement("img");
//console.log(canvas.toDataURL());
//方法返回一个包含图片展示的 data URI 。默认为 PNG 格式。图片的分辨率为96dpi
img.src = canvas.toDataURL();
$output.prepend(img);
//下面是保存到 本地的方法
//var link = document.getElementById('link');
//link.setAttribute('download', 'img_.png');
//link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
//link.click();
//下面是 上传的方法
//删除字符串前的提示信息 "data:image/png;base64,"
var data = canvas.toDataURL();
var img_base64 = data.substring(22);
$.ajax({type:"POST", url: "/uploadfile", data: { data: img_base64, name: 'file' }, success:
function (){
$output.prepend("upload done!");
}
});
};
initialize();
});
</script>
</head>
<body>
<video id="video" controls autoplay>
<source src="http://localhost:8080/img/hmbb.mp4"/>
您的浏览器不支持 video 标签。
</video>
<p/>
<button id="capture">Capture</button>
<div id="output"></div
<!-- 故意不显示这个按钮 -->
<a id="link" style="display:none">保存图片</a>
</body>
</html>
