暑期学习2

关于video视频插入

仍然是mime类型不支持，于是我将火狐换掉换成了chrome。

然后在运行的时候第一点、视频文件无法找到；第二点、html5video.js无法找到

于是我先讲html5video.js删除重新去下载了个video文件复制进js包中

其实就只剩下视频文件无法找到这一个问题了。仍旧上网搜索，但我看到有一条是这么说的要在springmvc.xml中插入段<mvc:annotation-driven />之后才想到我所用的是绝对路径导入文件，而我没有将视频所在的video包导入springmvc中所以就百分百会报错springMVC 404 no mapping found for HTTP request with URI

    <!--配置静态资源，直接映射到对应的文件夹，不被DispatcherServlet处理，3.04新增功能，需要重新设置spring-mvc-3.0.xsd--><mvc:resources mapping="/images/**" location="/images/" /><mvc:resources mapping="/js/**" location="/js/" /><mvc:resources mapping="/css/**" location="/css/" /><mvc:resources mapping="/fonts/**" location="/fonts/" /><mvc:resources mapping="/html/**" location="/html/" /><mvc:resources mapping="/sass/**" location="/sass/" /><mvc:resources mapping="/imges1/**" location="/imges1/" /><mvc:resources mapping="/js1/**" location="/js1/" /><mvc:resources mapping="/css1/**" location="/css1/" /><mvc:resources mapping="/video/**" location="/video/" />

所以我将video包导入之后第一个问题也就解决了。

现在视频可以正常播放无论是在哪一个浏览器上面。而代码仍旧是原来的代码，并不需呀更改MIME类型。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@ taglib prefix="video" uri="http://java.sun.com/jsp/jstl/core" %><%@ taglib prefix="source" uri="http://java.sun.com/jsp/jstl/core" %><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>know</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="home" /><meta name="keywords" content="home" /> <meta property="og:title" content=""/><meta property="og:image" content=""/><meta property="og:url" content=""/><meta property="og:site_name" content=""/><meta property="og:description" content=""/><meta name="twitter:title" content="" /><meta name="twitter:image" content="" /><meta name="twitter:url" content="" /><meta name="twitter:card" content="" /><link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400" rel="stylesheet"><link rel="stylesheet" href="css/animate.css"><link rel="stylesheet" href="css/icomoon.css"><link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/owl.carousel.min.css"><link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/pricing.css">
<link rel="stylesheet" href="css/style.css"> <link href="css/video-js.css" rel="stylesheet" type="text/css"> <script src="js/video.js"></script></head><body><div class="fh5co-loader"></div><div id="page"><nav class="fh5co-nav" role="navigation"><div class="top"><div class="container"><div class="row"><div class="col-xs-12 text-right"><p class="site">www.oceaneye.com</p><p class="num">Call: +01 123 456 7890</p><ul class="fh5co-social"><li><a href="#"><i class="icon-facebook2"></i></a></li><li><a href="#"><i class="icon-twitter2"></i></a></li><li><a href="#"><i class="icon-dribbble2"></i></a></li><li><a href="#"><i class="icon-github"></i></a></li></ul></div></div></div></div><div class="top-menu"><div class="container"><div class="row"><div class="col-xs-2"><div id="fh5co-logo"><a href="index.html"><i class="icon-study"></i>海之眼<span>.</span></a></div></div><div class="col-xs-10 text-right menu-1"><ul><li class="active"><a href="user/home">Home</a></li><li class="has-dropdown"><a href="user/course">Courses</a><ul class="dropdown"><li><a href="user/online">on-line courses</a></li><li><a href="user/offline">off-line activities</a></li></ul></li><li><a href="user/teacher">Teacher</a></li><li><a href="user/about">About</a></li><li><a href="user/pricing">Vip Pricing</a></li><li class="btn-cta"><c:if test="${uname==null }"><a href="user/tologin"><span>Login</span></a></c:if> <c:if test="${uname!=null }"><a href="user/mine"><span>欢迎,${uname}</span></a></c:if> <c:if test="${uname!=null }"><a href="<%=basePath %>user/logout"><span>Logout</span></a></c:if> </li></ul></div></div></div></div></nav><aside id="fh5co-hero"><div class="flexslider"><ul class="slides"> <li style="background-image: url(images/img_bg_4.jpg);"> <div class="overlay-gradient"></div> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2 text-center slider-text"> <div class="slider-text-inner"> <h1 class="heading-section"><a name="home">海洋知识科普</a></h1> <h2><span><a href="user/know#pre" >课程简介 </a></span> <span><a href="user/know#view">视频教学</a></span> <span><a href="user/data" >资料库</a></span> <span><a href="user/mine">我的课程</a></span></h2> </div> </div> </div> </div> </li> </ul> </div></aside><div id="fh5co-about"><div class="container"><div class="col-md-6 animate-box"><span><a name="pre">课程简介</a></span><h2>欢迎来到海之眼的海洋知识科普课程中</h2><p>是企业主打的课程，也是其他课程的先导入门课程。课程免费向中小学生提供，主要面向小学一年级、初一、高一这批初入学校的青少年，通过与部分中小学的合作，</p><p>由中小学教师担任主要师资团队，上海海洋大学讲师作为辅助，将每个中小学的素质教育特色和经验与其他学校共享。</p> </div><div class="col-md-6"><img class="img-responsive" src="images/img_bg_2.jpg" alt="Free HTML5 Bootstrap Template"></div><div class="col-md-6"><a href="user/know"><span>返回上级</span></a> </div></div></div><div id="fh5co-gallery" class="fh5co-bg-section" ><div class="row text-center"><a name="view"><span >视频教学</span></a></div><center> <video id="example_video_1" controls width="640" height="264" > <source src="<%=basePath%>video/ar.mp4" type='video/mp4' /> <source src="<%=basePath%>video/ar.webm" type='video/webm' /> </video> </center> <div class="row text-center"><a href="user/know"><span>返回上级</span></a></div> </div><footer id="fh5co-footer" role="contentinfo" style="background-image: url(images/img_bg_4.jpg);"><div class="overlay"></div><div class="container"><div class="row row-pb-md"><div class="col-md-3 fh5co-widget"><h3>About Us</h3><p>海之眼有限公司是一家由来自上海海洋大学信息学院、生命学院、经济管理学院的五名学生牵头，依托于上海海洋大学人工智能鱼基地等组建的企业。旨在主要通过PC网站，采用“互联网+教育”模式，整合线上线下教育平台，引进VR技术，打造面向中小学生的寓教于乐的VR海洋馆——虚拟海洋教育基地。</p></div><div class="col-md-2 col-sm-4 col-xs-6 col-md-push-1 fh5co-widget"><h3>Learning</h3><ul class="fh5co-footer-links"><li><a href="#">Course</a></li><li><a href="#">Blog</a></li><li><a href="#">Contact</a></li><li><a href="#">Terms</a></li><li><a href="#">Meetups</a></li></ul></div>
<div class="col-md-2 col-sm-4 col-xs-6 col-md-push-1 fh5co-widget"><h3>Learn & Grow</h3><ul class="fh5co-footer-links"><li><a href="#">Blog</a></li><li><a href="#">Privacy</a></li><li><a href="#">Testimonials</a></li><li><a href="#">Handbook</a></li><li><a href="#">Held Desk</a></li></ul></div>
<div class="col-md-2 col-sm-4 col-xs-6 col-md-push-1 fh5co-widget"><h3>Engage us</h3><ul class="fh5co-footer-links"><li><a href="#">Marketing</a></li><li><a href="#">Visual Assistant</a></li><li><a href="#">System Analysis</a></li><li><a href="#">Advertise</a></li></ul></div>
<div class="col-md-2 col-sm-4 col-xs-6 col-md-push-1 fh5co-widget"><h3>Legal</h3><ul class="fh5co-footer-links"><li><a href="#">Find Designers</a></li><li><a href="#">Find Developers</a></li><li><a href="#">Teams</a></li><li><a href="#">Advertise</a></li><li><a href="#">API</a></li></ul></div></div></div></footer></div>
<div class="gototop js-top"><a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a></div><script src="js/modernizr-2.6.2.min.js"></script> <script src="js/flowplayer.min.js"></script> <script src="js/jarisflvplayer.js"></script><script src="js/jquery.min.js"></script><script src="js/jquery.easing.1.3.js"></script><script src="js/bootstrap.min.js"></script><script src="js/jquery.waypoints.min.js"></script><script src="js/jquery.stellar.min.js"></script><script src="js/owl.carousel.min.js"></script><script src="js/jquery.flexslider-min.js"></script><script src="js/jquery.countTo.js"></script><script src="js/jquery.magnific-popup.min.js"></script><script src="js/magnific-popup-options.js"></script><script src="js/simplyCountdown.js"></script><script src="js/main.js"></script><script> var d = new Date(new Date().getTime() + 1000 * 120 * 120 * 2000);
// default example simplyCountdown('.simply-countdown-one', { year: d.getFullYear(), month: d.getMonth() + 1, day: d.getDate() });
//jQuery example $('#simply-countdown-losange').simplyCountdown({ year: d.getFullYear(), month: d.getMonth() + 1, day: d.getDate(), enableUtc: false });</script></body></html>

转载于:https://www.cnblogs.com/rili-1/p/7402419.html