来自 操作系统 2020-01-24 00:59 的文章
当前位置: 澳门威尼斯人平台 > 操作系统 > 正文

引入外部页面

引入视频参考代码
<object width="450" height="390"><param name="wmode" value="transparent" /><param name="movie"

  最近在写答辩项目的时候用到了<%@ include file=""%>觉得挺好用的,所以想来分享一下。

文档

学习要点:

value="http:XXXXX.swf"><embed src="http:/XXXX.swf"  type="application/x-shockwave-flash" width="450"

  一个项目可以分成好几个不同的模块来写,同样,其实一个jsp或者html页面也可以分成几个模块来写,然后通过<%@ include file="paper.jsp"%>来实现不同的页面在一个页面的组装,就好像零件与机器的关系,我们可以按国标做出很多的零件,然后在做机器时选用所需要的零件进行组装就好,这样的好处在于一些重复的代码写一次就好,不仅可以使页面更简洁,在后期需要对代码进行修改时也更简便。

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'PingFang SC'}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'PingFang SC'; min-height: 17.0px}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}li.li1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'PingFang SC'}span.s1 {font: 12.0px Helvetica}span.s2 {font: 12.0px 'PingFang SC'}span.Apple-tab-span {white-space:pre}ul.ul1 {list-style-type: square}ul.ul2 {list-style-type: check}

音频和视频

1、概述
a.容器(container)和编解码器(coder)
》视频容器
音频文件或视频文件,都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其他一些元数据。视频播放时,音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封面、标题、子标题、字幕等相关信息。主流视频容器支持的格式为:avi、flv、MP4、mkv、ogg、webm。
》编解码器
音频和视频编码/解码是一组算法,用来对一段特定音频或视频进行解码和编码,以便音频和视频能够播放。原始的媒体文件体积非常巨大,如果不对其进行编码,那么数据量是非常惊人的,在互联网上传播则要耗费无法忍受的时间。如果不对其进行解码,就无法将编码后的数据重组为原始的媒体数据。主流的音频编解码器:AAC,MPEG-3,0gg Voribs,视频编解码器:H.264,VP8,ogg Theora。
》浏览器的支持情况

2、video视频元素
src:视频资源的url,必需
width:视频宽度
heitgh:视频高度
autoplay:设置后,表示立刻开始播放视频
preload:设置后,表示预先载入视频
controls:设置后,表示显示播放控件
loop:设置后,表示反复播放视频
muted:设置后,表示视频处于静音状态
poster:置顶视频数据载入时显示的图片

<video src="loginmovie.mp4" width="500" height="300"  controls></video>
谷歌浏览器显示

![CA834F4F-382F-4FFE-BF28-175B43D3A466.png](http://upload-images.jianshu.io/upload_images/1293851-100140f2bb07fdfb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Safari显示


![B4BF0365-FB1E-47DB-9680-9711871D472F.png](http://upload-images.jianshu.io/upload_images/1293851-3ce909198c3aee56.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


如果是从服务器获取的视频的话,会有缓存。第一次缓存之后,以后就会直接播放了。

预加载设置preload

          preload属性有三个值:
none表示播放器什么都不加载
metadata表示播放之前只能加载元数据(宽高、第一帧画面等信息)
auto表示请求浏览器尽快下载整个视频

浏览器支持

     浏览器不支持的时候可以多准备集中类型的视频,写法如下

![688B8F8E-DD64-4C7A-91AE-1B1686310821.png](http://upload-images.jianshu.io/upload_images/1293851-2e630ba4b4283be9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 <video width="640" height="480" controls>
            <source src="test.webm">
           <source src=test.mp4>
           <source src=test.ogg>
  </video>
这样不同的浏览器会选择自己支持的类型进行播放。

3、audio音频元素

》属性:
src:音频资源url
autoplay:设置后,表示立刻开始播放音频
preload:设置后,表示预先载入音频
controls:设置后,表示显示播放控件

》嵌入音频
<audio src="刘珂矣-风筝误.mp3" controls></audio>

![688B8F8E-DD64-4C7A-91AE-1B1686310821.png](http://upload-images.jianshu.io/upload_images/1293851-ab6be35792559add.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


如果不加controls,什么都不会显示,类似背景音乐的效果。
<audio src="刘珂矣-风筝误.mp3" autoplay></audio>

万一出现不支持的情况,就需要类似视频一样做兼容处理。
             <audio>
   <source src="刘珂矣-风筝误.mp3">
   <source src="刘珂矣-风筝误.m4a">
   <source src="刘珂矣-风筝误.wav">
  </audio>
浏览器会自动选择支持的格式。

1.音频和视频概述 

height="390"></embed></object>

  例如我需要实现分页的效果,那么我会先写一个paperBean的model类,然后写一个paper.jsp页面来实现页数的显示,如果还要考虑分页框的样式,那我会再写一个paper.css,在paper.jsp中引入。完成paper.jsp后在所有需要分页显示的页面中通过<%@ include file="paper.jsp"%>来引入分页的界面,实现分页的功能,在后期代码出现问题的话可以按模块很方便的进行修改。

源码

2.video 视频元素 

MP3,rm,ram,ra 格式音频的参考代码
<EMBED src="音频地址" width=300 height=68 type=audio/x-pn-realaudio-plugin mime-types="mime.types"

html01:

3.audio 音频元素

Initfn="load-types" controls="ControlPanel,StatusBar,TACCtrl" maintainaspect="true" loop="true"

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>音频和视频</title>        
    </head>
    <body>
        <br><br>
        音频和视频
        <hr><br>

        <!-- <video src="loginmovie.mp4" width="500" height="300"  controls loop muted></video> -->
        <video src="loginmovie.mp4" width="500" height="300" controls poster="../img/img.jpg"></video>
        <br><br>
        从网址上获取视频
        <br><br>
        <video src="http://video.myhaowai.cn/2016/11/29/2b2146d2cb3a9c7f56266e8ecd6be676.mp4" width="500" height="300" controls preload="auto"></video>
        <br><br>

        <video width="640" height="480" controls>
            <source src="test.webm">
            <source src=test.mp4>
            <object>实现flash插件的播放,如果屏蔽IE9以下则不需要</object>
        </video>


    </body>
</html>

 

autostart="true">

html02:

主讲教师:李炎恢

wma,asf 格式音频参考代码
<center><OBJECT classid=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95 height=45 id=MediaPlayer1

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>音频和视频</title>        
    </head>
    <body>
        <br><br>
        音频和视频
        <hr><br>
        <audio src="刘珂矣-风筝误.mp3" controls></audio>

        <br>不兼容处理
        <audio>
            <source src="刘珂矣-风筝误.mp3">
            <source src="刘珂矣-风筝误.m4a">
            <source src="刘珂矣-风筝误.wav">
        </audio>

    </body>
</html>

 

width=285><PARAM NAME="AutoStart" VALUE="-1"><PARAM NAME="Filename" VALUE="音频地址"><PARAM

本章主要探讨 HTML5 中音频和视频元素,通过这两个原生的媒体元素向 HTML 页面中嵌入音频和视频。

NAME="loop" VALUE="-1"></OBJECT>

 

asf,mid 格式音频的参考代码
<center><embed src="音频地址" autostart=true loop=true>

一.音频和视频概述

swf 格式(即 flash)的参考代码
<center><embed src="闪件地址" width=600 height=300>

首先,我们要理解两个概念:容器(container)和编解码器(codec)。

wmv 格式视频的参考代码
<center><object id=MediaPlayer height=380 width=460 classid=clsid:6BF52A52-394A-11d3-B153-

 

00C04F79FAA6><param name="URL" value="/*.wmv"></object>
rm 格式视频的参考代码
<center><embed src=地址 width=300 height=315 autostart=true loop=false maintainaspect=true

1.视频容器

controls="ImageWindow,ControlPanel,StatusBar,TACCtrl" type=audio/x-pn-realaudio-plugin Initfn=load-

音频文件或视频文件,都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其他一些元数据。视频播放时,音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封面、标题、子标题、字幕等相关信息。主流视频容器支持的格式为:.avi、.flv、.mp4、.mkv、.ogg、.webm。

types mime-types=mime.types>

 

<embed src="背景音乐网址" hidden="true" autostart="true" loop="true">

2.编解码器

本文由澳门威尼斯人平台发布于操作系统,转载请注明出处:引入外部页面

关键词: