HTML播放本地視頻

第一種:

<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;
    }

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章