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
- 2
- 3
- 4
- 5
- 6
- 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";
}
java html中引入视频的格式_HTML中插入视频相关推荐
- 万能视频转换:实现难搞的监控视频.A64格式转成普通视频
万能视频转换:实现难搞的监控视频.A64格式转成普通视频 下载狸窝转换器 下载暴风影音 代码转换 将暴风的代码复制到狸窝中,然后打开狸窝软件进行转换 问了无数大神,下载量所有号称万能格式的软件都不能转 ...
- Java中xmp标签的作用_html 中 xmp标记
HTML页面中显示HTML标签代码,可以使用 html标签内容,这样,在网页中就会显示html标签 for(var i=0;i var column = columns[i]; var dataInd ...
- jsp中写隐藏td标签_html中隐藏td
html|table|内容超出长度-隐藏|兼容IE和FF的写法. HTML中,一个表格,要达到二个条件: 1.内容多了不自动换行: 2.固定单元格宽度.如果内容超出,则隐藏: 如果在IE下,只是写成& ...
- react中引入html文件,在react中怎么引用js
在react中怎么引用js 推荐两种引入的方法,当然也可以自己编写一个JS类(ES6语法)实现动态插入JS到页面,然后在React项目引入. 第一种:使用插件 react-load-script 如果 ...
- java中的for语句格式_Java中foreach循环语句的格式可以写成( )。
[其它]1) 了解. 收集.整理 原研哉生平.设计理念及经典代表作 (可交) 2) google baidu 简洁的页面 丰富的变化 收集 (可交 ) [单选题]ABS 塑料通常用于 Jaguar L ...
- java中html的树状_HTML中的树状选择
使用SELECT元素将不起作用.您可以基于此创建自定义SELECT: CSS: * { margin: 0; padding: 0; } .select, .select-tree { border: ...
- 在html中主要支持的音频格式,html5中audio支持音频格式
HTML5 Audio标签能够支持wav, mp3, ogg, acc, webm等格式,但有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持.不是所有的浏览器都支持MP ...
- jsp中给div加背景_html中给元素添加背景图片或者gif动图
添加背景图片有四种常用的方式,分别是: repeat 完全平铺 repeat-x 横向平铺 repeat-y 纵向平铺 no-repeat 不平铺 使用示例: Document ...
- oracle中raw是什么格式,oracle中RAW数据类型
近日在研究v$latch视图时,发现一个从未见过的数据类型.v$latch 中ADDR属性的数据类型为RAW(4|8) 同时也发现v$process中的ADDR属性的数据类型也为RAW(4|8).于 ...
最新文章
- 【OpenCV 4开发详解】均值滤波
- Js Chars应用
- apollo在Linux下读不到参数,Apollo的基本使用及常见问题
- CDOJ 1401 谭爷的黑暗沙拉 数学
- C++socket编程(六):6.1 设置socket的阻塞和非阻塞
- ajax 输入一个整数,jQuery.ajax()仅适用于整数
- [转载] Python学习系列之下划线与变量命名规则
- 基于神经网络的分类设计——模式识别实验
- Spring系列七:JDK 动态代理和 CGLIB 代理
- 苹果手机如何分享wifi密码_怎样用手机改wifi密码
- 打开计算机出现服务器运行失败,win7打开Windows Media Player听歌提示“服务器运行失败”怎么办...
- 网络爬虫——原理简介
- 属牛人性格特点及脾气如何呢?
- 足球数据API接口 - 【球员资料】API调用示例代码
- 国外软件下载速度太慢,一个仅供参考的解决方案
- 利用gensim里word2vec训练实例——分析三国里人物关系
- 刷脸支付无人便利店的使用体验也更好了
- 公务员考试——判断(一)
- [答疑]-中断流程举例:在REE(SCR.FIQ=1)侧时产生了FIQ,跳转到EL3后做了哪些事情?
- 自动解析zxw文档的javascript 代码保存