java html中引入视频的格式_HTML中插入视频

最常用的向HTML中插入视频的方法有两种，一种是古老的标签，一种是html5中的标签。

前者的兼容性没得说，但是使用起来不太方便，后者使用起来很方便，但是兼容性让人头疼。

虽然后者兼容性存在很多问题，但是因为使用很方便，符合未来网页设计发展的趋势，因此我们以后者为主要的插入视频的方法，因为它兼容性的问题，前者作为辅助。

代码如下:

your browser does not support the video tag

当前，video 元素支持三种视频格式：

格式 IE Firefox Opera Chrome Safari

Ogg No 3.5+ 10.5+ 5.0+ No

MPEG 4 9.0+ No No 5.0+ 3.0+

WebM No 4.0+ 10.6+ 6.0+ No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

注：格式必须符合上面三条详细要求，比如MPEG 4，必须是H.264视频和AAC音频。

在这种情况下，如果视频格式正确，大部分浏览器的兼容性结果我们还算满意，但是IE678不支持它，并且人家的用户至今在中国还是十分庞大的群体，我们就必须想到另外一个解决方案支持它们：

代码如下:

这里面引入了一些文件，除了flv格式的视频，还有几个swf或js文件，都是用DW软件生成的，不想研究标签的朋友去DW软件生成就行，如果可以巧妙的融合

这两段代码就可以得到兼容所有主流浏览器的终极代码了。

于是我们可以这样：

用jquery判断浏览器是否为IE(不用判断具体IE版本，因为服务器的原因IE很可能高版本也不通过，暂且IE全部用标签)，根据版本加载不同的标签，代码如下：

代码如下:

if($.browser.msie){

document.write(''+

''+

''+

''+

''+

''+

''+

''+

''+

''+

'');

}else{

document.write(''+

''+

''+

'your browser does not support the video tag'+

'');

}

不要忘记在写这段代码之前引入jquery文件

一、视频

1.对在线视频的添加

在各大网站打开一个视频，在下方的分享找到HTML代码，然后复制HTML代码到自己的代码中。

2.添加本地视频

autoplay为自动播放,loop为循环次数，引号内值为loop为无限循环，1为播放1次

Your browser does not support the video tag.

Your browser does not support HTML5 video.

播放/暂停

大

中

小

var myVideo=document.getElementById("video1");

function playPause()

{

if (myVideo.paused)

myVideo.play();

else

myVideo.pause();

}

function makeBig()

{

myVideo.width=450;

}

function makeSmall()

{

myVideo.width=350;

}

二、音频

Your browser does not support the audio tag.

delay表示摧迟，引号内数字为秒数。

三 字幕滚动

滚动字幕

2.各参数详解：

a)scrollAmount。它表示速度，值越大速度越快。如果没有它，默认为6，建议设为1～3比较好。

b)width和height，表示滚动区域的大小，width是宽度，height是高度。特别是在做垂直滚动的时候，一定要设height的值。

c)direction。表示滚动的方向，默认为从右向左：←←←。可选的值有right、down、up。滚动方向分别为：right表示→→→，up 表示↑，down表示↓。

d)scrollDelay，这也是用来控制速度的，默认为90，值越大，速度越慢。通常scrollDelay是不需要设置的。

e)behavior。用它来控制属性，默认为循环滚动，可选的值有alternate(交替滚动)、slide(幻灯片效果，指的是滚动一次，然后停止 滚动)

此种字幕滚动也适用于图片滚动

四、图片轮换

var curIndex=0;

//时间间隔(单位毫秒)，每秒钟显示一张，数组共有5张图片放在Photos文件夹下。

var timeInterval=1000;

var arr=new Array();

arr[0]="three/c7.jpg";

arr[1]="three/c6.jpg";

arr[2]="three/c8.jpg";

arr[3]="three/c9.jpg";

setInterval(changeImg,timeInterval);

function changeImg()

{

var obj=document.getElementById("obj");

if (curIndex==arr.length-1)

{

curIndex=0;

}

else

{

curIndex+=1;

}

obj.src=arr[curIndex];

}

2.js实现仿京东图片轮播效果，当鼠标划在窗口上面停止计时器，鼠标离开窗口，开启计时器，鼠标划在页签上面，停止计时器，手动切换

HTML部分

*{

margin:0px;

padding:0px;

list-style:none;           //这句话必须有，不然数字乱码

}

#flash{width: 687px;height: 400px;left:0px;position: relative;cursor: pointer;}

#pic li{position: absolute;top: 0;left: 0;z-index: 1;display: none;}

#num{position: absolute;left: 40%;bottom: 10px;z-index: 2;cursor:default;}

#num li{float: left;width: 20px;height: 20px;border-radius: 50%;background: #666;margin: 3px;line-height: 20px;text-align: center;color: #fff;cursor: pointer;}

#num li.active{background: #f00;}

.arrow{height: 60px;width: 30px;line-height: 60px;text-align: center;display: block;position: absolute;top:45%;z-index: 3;display: none;}

.arrow:hover{background: rgba(0,0,0,0.7);}

#flash:hover .arrow{display: block;}

#left{left: 2%;}

#right{right: 2%;}

• 
• 
• 
• 
• 
• 
• 

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7

<

>

JavaScript部分

function $(id) {

return typeof id==='string'?document.getElementById(id):id;

}

window.οnlοad=function(){

var index=0;

var timer=null;

var pic=$("pic").getElementsByTagName("li");

var num=$("num").getElementsByTagName("li");

var flash=$("flash");

var left=$("left");

var right=$("right");

//单击左箭头

left.οnclick=function(){

index--;

if (index<0) {index=num.length-1};

changeOption(index);

}

//单击右箭头

right.οnclick=function(){

index++;

if (index>=num.length) {index=0};

changeOption(index);

}

//鼠标划在窗口上面，停止计时器

flash.οnmοuseοver=function(){

clearInterval(timer);

}

//鼠标离开窗口，开启计时器

flash.οnmοuseοut=function(){

timer=setInterval(run,2000)

}

//鼠标划在页签上面，停止计时器，手动切换

for(var i=0;i

num[i].id=i;

num[i].οnmοuseοver=function(){

clearInterval(timer);

changeOption(this.id);

}

}

//定义计时器

timer=setInterval(run,2000)

//封装函数run

function run(){

index++;

if (index>=num.length) {index=0};

changeOption(index);

}

//封装函数changeOption

function changeOption(curindex){

console.log(index)

for(var j=0;j

pic[j].style.display="none";

num[j].className="";

}

pic[curindex].style.display="block";

num[curindex].className="active";

index=curindex;

}

}

五

实现两个图层，平时第二个图层隐藏，鼠标触碰时第二个图层出现，另一个隐藏；鼠标离开恢复原样

1.有且只有一个这种图层

#aa

{

width:100px;

height:100px;

left:50px;

top:50px;

background-color:#0FF;

position:absolute;

}

#a

{

width:100px;

height:100px;

background-color: #F90;

visibility:hidden;

position:absolute;

}

function over()

{

var aa =document.getElementById("a");

aa.style.visibility="visible";

}

function out()

{

var aa =document.getElementById("a");

aa.style.visibility="hidden";

}