HTML中插⼊视频
最常⽤的向HTML中插⼊视频的⽅法有两种，⼀种是古⽼的<object></object>标签，⼀种是html5中的<video></video>标签。
前者的兼容性没得说，但是使⽤起来不太⽅便，后者使⽤起来很⽅便，但是兼容性让⼈头疼。
虽然后者兼容性存在很多问题，但是因为使⽤很⽅便，符合未来⽹页设计发展的趋势，因此我们以后者为主要的插⼊视频的⽅法，因为它兼容性的问题，前者作为辅助。
代码如下:
<video width="602px" height="345px" controls="controls">
<source src="public/video/test.mp4" type="video/mp4"></source>
<source src="public/" type="video/ogg"></source>
your browser does not support the video tag
</video>
当前，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不⽀持它，并且⼈家的⽤户⾄今在中国还是⼗分庞⼤的体，我们就必须想到另外⼀个解决⽅案⽀持它们：
代码如下:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="624" height="351" id="FLVPlayer1">
<param name="movie" value="FLVPlayer_Progressive.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="FlashVars"
value="&MM_ComponentVersion=1&skinName=public/swf/Clear_Skin_3&streamName=public/video/test&autoPlay=false&autoRewind=false" />
<param name="swfversion" value="8,0,0,0" />
<!-- 此 param 标签提⽰使⽤ Flash Player 6.0 r65 和更⾼版本的⽤户下载最新版本的 Flash Player。如
果您不想让⽤户看到该提⽰，请将其删除。 -->
<param name="expressinstall" value="expressInstall.swf" />
</object>
这⾥⾯引⼊了⼀些⽂件，除了flv格式的视频，还有⼏个swf或js⽂件，都是⽤DW软件⽣成的，不想研究<object></object>标签的朋友去DW软件⽣成就⾏，如果可以巧妙的融合
这两段代码就可以得到兼容所有主流浏览器的终极代码了。
于是我们可以这样：
⽤jquery判断浏览器是否为IE（不⽤判断具体IE版本，因为服务器的原因IE很可能⾼版本也不通过，暂且IE全部⽤<object></object>标签），根据版本加载不同的标签，代码如下：
代码如下:
<script>
if($.browser.msie){
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="624" height="351"
id="FLVPlayer1">'+
'<param name="movie" value="FLVPlayer_Progressive.swf" />'+
'<param name="quality" value="high" />'+
'<param name="wmode" value="opaque" />'+
'<param name="scale" value="noscale" />'+
'<param name="salign" value="lt" />'+
'<param name="FlashVars"
value="&MM_ComponentVersion=1&skinName=public/swf/Clear_Skin_3&streamName=public/video/test&autoPlay=false&autoRewind=false" />'+
'<param name="swfversion" value="8,0,0,0" />'+
'<!-- 此 param 标签提⽰使⽤ Flash Player 6.0 r65 和更⾼版本的⽤户下载最新版本的 Flash Player。如果您不想让⽤户看到该提⽰，请将其删除。 -->'+
'<param name="expressinstall" value="expressInstall.swf" />'+
'</object>');
'<source src="public/video/test.mp4" type="video/mp4"></source>'+
'<source src="public/" type="video/ogg"></source>'+
'your browser does not support the video tag'+
'</video>');
}
</script>
不要忘记在写这段代码之前引⼊jquery⽂件
⼀、视频
1.对在线视频的添加
在各⼤⽹站打开⼀个视频，在下⽅的分享到HTML代码，然后复制HTML代码到⾃⼰的代码中。
2.添加本地视频
<video src="" autoplay="autoplay"  loop="" ></video>
<audio src="" autoplay="autoplay" loop="loop"></audio>
autoplay为⾃动播放,loop为循环次数，引号内值为loop为⽆限循环，1为播放1次
<video  width="450" height="262" controls="controls">
<source src="image/2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<video title="钢铁侠的变⾝视频" id="video1" width="400" >
<source src="image/1.mp4" />
Your browser does not support HTML5 video.
</video> <br />
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">⼤</button>
<button onclick="makeNormal()">中</button>
<button onclick="makeSmall()">⼩</button>
<script>
var ElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=450;
}
function makeSmall()
{
myVideo.width=350;
}
</script>
⼆、⾳频
<audio controls="controls" autoplay="true" >
<source src="cw.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<bgsound src="" loop="-1"  delay="" />
delay表⽰摧迟，引号内数字为秒数。
三 字幕滚动
<marquee scrollamount="6" behavior="scroll" direction="left" align="middle" onmouseover=stop() onmouseout=start()>滚动字幕</marquee>
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(幻灯⽚效果，指的是滚动⼀次，然后停⽌ 滚动)
此种字幕滚动也适⽤于图⽚滚动
四、图⽚轮换
<img id="obj"  src="three/c7.jpg"/>
<script language="javascript" type="text/javascript" >
var curIndex=0;
//时间间隔(单位毫秒)，每秒钟显⽰⼀张，数组共有5张图⽚放在Photos⽂件夹下。
var timeInterval=1000;
var arr=new Array();
arr[2]="three/c8.jpg";
arr[3]="three/c9.jpg";
setInterval(changeImg,timeInterval);
function changeImg()
{
var ElementById("obj");
if (curIndex==arr.length-1)
{
curIndex=0;
}
else
{
curIndex+=1;
}
obj.src=arr[curIndex];
}
</script>
2.js实现仿京东图⽚轮播效果，当⿏标划在窗⼝上⾯停⽌计时器，⿏标离开窗⼝，开启计时器，⿏标划在页签上⾯，停⽌计时器，⼿动切换
HTML部分
<style>
*{
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%;}
</style>
<div id="flash">
<ul id="pic">
html如何设置图片滚动<li ><img  src="images/h5.bmp" alt="" ></li>
<li><img src="images/h7.png" alt="" ></li>
<li><img src="images/h6.jpg" alt="" ></li>
<li><img src="images/h3.jpg" alt="" ></li>
<li><img src="images/h1.jpg" alt="" ></li>
<li><img src="images/h2.jpg" alt="" ></li>
<li><img src="images/h4.jpg" alt="" ></li>
</ul>
<ol id="num">
<li class="active"> 1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ol>
<a href="javascript:;" class="arrow" id="left"><</a>
<a href="javascript:;" class="arrow" id="right">></a>
</div>
JavaScript部分
function $(id) {
return typeof id==='string'?ElementById(id):id;
}
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");
//单击左箭头
index--;
if (index<0) {index=num.length-1};
changeOption(index);
}
//单击右箭头
if (index>=num.length) {index=0};
changeOption(index);
}
//⿏标划在窗⼝上⾯，停⽌计时器
clearInterval(timer);
}
//⿏标离开窗⼝，开启计时器
timer=setInterval(run,2000)
}
/
/⿏标划在页签上⾯，停⽌计时器，⼿动切换
for(var i=0;i<num.length;i++){
num[i].id=i;
num[i].onmouseover=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<num.length;j++){
pic[j].style.display="none";
num[j].className="";
}
pic[curindex].style.display="block";
num[curindex].className="active";
index=curindex;
}
}
五
实现两个图层，平时第⼆个图层隐藏，⿏标触碰时第⼆个图层出现，另⼀个隐藏；⿏标离开恢复原样1.有且只有⼀个这种图层
<style>
#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;
}
</style>
</head>
<body>
<div id="aa" onmouseover="over()" onmouseout="out()"><div id="a"> </div></div>
<script>
function over()
{
var aa =ElementById("a");
aa.style.visibility="visible";
}
function out()
{
var aa =ElementById("a");
aa.style.visibility="hidden";
}
</script>
</body>
</html>
2.有多个⼀样的图层
<style>
#a
{
height:415px;
border:1px solid red;
position:relative;}
.aa
{
width:20%;
height:200px;
margin-left:4%;
float:left;
margin-top:5px;
background-color:#0F6;
position:relative;}
.b
{
width:100%;
height:200px;
position:relative;
background-color:#000;
opacity:0.4;
visibility:hidden;}
#w
{
position:relative;
top:-180px;
visibility:hidden;
}
</style>
</head>
<body>
<div id="a">
<div class="aa"><div class="b"></div></div>
<div class="aa"><div class="b"></div></div>
<div class="aa"><div class="b"></div></div>
<div class="aa"><div class="b"></div></div>
<div class="aa"><div class="b"></div></div>
<div class="aa"><div class="b"></div></div>
<div class="aa"><div class="b"></div></div>
<div class="aa"><div class="b"></div></div>
</div>
</body>
</html>
<script>
var ElementsByClassName("aa");
for(var i=0;i<all.length;i++)
{
all[i].onmouseover=function(){this.firstChild.style.visibility="visible"}    all[i].onmouseout=function(){this.firstChild.style.visibility="hidden"} }
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。