暑期学习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" />? <!-- Facebook and Twitter integration --><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"><!-- Animate.css --><link rel="stylesheet" href="css/animate.css"><!-- Icomoon Icon Fonts--><link rel="stylesheet" href="css/icomoon.css"><!-- Bootstrap ?--><link rel="stylesheet" href="css/bootstrap.css">
<!-- Magnific Popup --><link rel="stylesheet" href="css/magnific-popup.css">
<!-- Owl Carousel ?--><link rel="stylesheet" href="css/owl.carousel.min.css"><link rel="stylesheet" href="css/owl.theme.default.min.css">
<!-- Flexslider ?--><link rel="stylesheet" href="css/flexslider.css">
<!-- Pricing --><link rel="stylesheet" href="css/pricing.css">
<!-- Theme style ?--><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><!-- Modernizr JS --><script src="js/modernizr-2.6.2.min.js"></script>? ? <script src="js/flowplayer.min.js"></script>? ? <script src="js/jarisflvplayer.js"></script><!-- FOR IE9 below --><!--[if lt IE 9]><script src="js/respond.min.js"></script><![endif]--><!-- jQuery --><script src="js/jquery.min.js"></script><!-- jQuery Easing --><script src="js/jquery.easing.1.3.js"></script><!-- Bootstrap --><script src="js/bootstrap.min.js"></script><!-- Waypoints --><script src="js/jquery.waypoints.min.js"></script><!-- Stellar Parallax --><script src="js/jquery.stellar.min.js"></script><!-- Carousel --><script src="js/owl.carousel.min.js"></script><!-- Flexslider --><script src="js/jquery.flexslider-min.js"></script><!-- countTo --><script src="js/jquery.countTo.js"></script><!-- Magnific Popup --><script src="js/jquery.magnific-popup.min.js"></script><script src="js/magnific-popup-options.js"></script><!-- Count Down --><script src="js/simplyCountdown.js"></script><!-- Main --><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
總結
- 上一篇： Unity3D资源分享
- 下一篇： java map的理解_java中的ha