博客

HTML播放本地视频

  • Post author:
  • Post category:其他


第一种： 

<embed type="video/webm" src="F:\1.mp4" width="400" height="300">

height
pixels
 		规定嵌入内容的高度。

src
URL
 		规定被嵌入内容的 URL。

type
MIME_type
 		规定嵌入内容的 MIME 类型。

注：MIME = Multipurpose Internet Mail Extensions。

width
pixels
 		规定嵌入内容的宽度。

示例： 

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>embed标签</title> 
</head>
<body>

<h1>embed 元素</h1>

<embed type="video/webm" src="movie.mp4" width="400" height="300">

</body>
</html>

第二种： 

<video width="320" height="240" controls>
  <source src="F:\1.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed src="F:\1.mp4" width="320" height="240">
  </object>
</video>

报错：

Not allowed to load local resource


关于Not allowed to load local resource问题解决方案

当页面上直接访问项目外的资源时会出现这个问题，它不允许我们直接访问系统中的资源，找了一些资料后配置了一个虚路径解决这个问题。 

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;


@Configuration
public class MyWebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/vedio/**").addResourceLocations("file:D:/vedio/");
    }
}

文件保存在实目录file:D:/vedio/下，访问的时候使用虚路径/vedio，比如文件名为1.mp4，就直接/vedio/1.mp4就ok了。

示例：我视频实际存储路径问本地磁盘

d:/vedio/
 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt" %>

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<video width="320" height="240" controls>
  <source src="http://localhost:8080/vedio/${url}" type="video/mp4">
  <source src="${url}" type="video/ogg">
  <source src="${url}" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
	<embed src="http://localhost:8080/vedio/${url}" width="320" height="240">
  </object>
</video>
</body>
</html>



//播放视频
    @RequestMapping(value = "/bf")
    public ModelAndView play(String id) throws Exception {
    	
    	ModelAndView mv=new ModelAndView();
    	Vedio video=videoService.findById(id);
    	mv.addObject("url",video.getFilename());
    	mv.setViewName("student/bf");
    	return mv;
    }


版权声明：本文为L15810356216原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。