本文目录一览：
- 1、html js 什么让网页中插入点视频开始显示图片
- 2、如何在网页上插入视频（用html制作）
- 3、如何用JS和HTML完成如图效果的视频
- 4、如何制作视频网页
- 5、js 如何实现网页上的视频非等比缩放
html js 什么让网页中插入点视频开始显示图片
网页中插入点视频开始显示图片,可以利用js代码来实现点击图片显示视频。具体代码如下:
style
.pic{clear:both;width:410px;height:240px}/*图片区域*/
.pic img{width:410px;height:240px}/*图片宽度和高度，可自行修改*/
.play{clear:both;width:410px;height:240px;display:none;}/*视频区域-最初先设为隐藏*/
/style
div id=”pic”a href=”JavaScript:vide();”img src=”图片.jpg”/a/div
div id=”play”embed src=”视频文件.mp4″ width=”410″ height=”240″ autostart=”false”/embed/div
script
function $(v){return document.getElementById(v);}
function view(id){$(id).style.display = “block”;}
function hide(id){$(id).style.display = “none”;}
function vide(){//点击图片显示视频
hide(“pic”);view(“play”);
}
/script
如何在网页上插入视频（用html制作）
首先下载video.js，百度一下就能找到。
这个是下载后的目录。
先把要用到的js\css\swf都加载到html页面上。如：
link href=”video-js/video-js.css” rel=”stylesheet” type=”text/css”
script src=”video-js/video.js”/script
script
videojs.options.flash.swf = “video-js/video-js.swf”;
/script
加入下面的代码：
video
id=”my_video_1″ class=”video-js vjs-default-skin” controls
preload=”auto”width=”640″height=”480″poster=”video-js/my_video_poster.png”
data-setup=”{}”
source src=”Wildlife.mp4″ type=’video/mp4′
/video
只要记住：修改width=”640″ height=”480″来改变视频显示大小，修改src=”Wildlife.mp4″来改变要显示的视频。
然后打开html文件查看效果吧，它有暂停、音量控制、全屏等功能，还有好多其他功能。
如何用JS和HTML完成如图效果的视频
使用h5的video标签
用js控制此标签的方法 具体可用方法我如下链接
网页链接
如何制作视频网页
看你用那种技术了，有html5的直接嵌入，还有flash嵌入，还有银光嵌入，还有Qvod嵌入，还有很多种。 根据你的实际需要去选择，选择你会的就是选择对的。
制作视频网页可以用dw+fl+fw，也可以用vs+expression开发开发，根据你的项目大小去选择。 当然还有其他的开发工具。
制作的步骤就是html的对象标签嵌入视频源，css定位，css+js交互，就完成了。
ui部分可以参照欧美风格，韩版风格，简约，时尚，页面的整体布局，和配色，需要从美学，心理学入手。
js 如何实现网页上的视频非等比缩放
首先看看resizeimg函数的源代码：
function resizeimg(ImgD,iwidth,iheight) {
var image=new Image();
image.src=ImgD.src;
if(image.width0 image.height0){
if(image.width/image.height= iwidth/iheight){
if(image.widthiwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+”×”+image.height;
}
else{
if(image.heightiheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+”×”+image.height;
}
ImgD.style.cursor= “pointer”; //改变鼠标指针
ImgD.onclick = function() { window.open(this.src);} //点击打开大图片
if (navigator.userAgent.toLowerCase().indexOf(“ie”) -1) { //判断浏览器，如果是IE
ImgD.title = “请使用鼠标滚轮缩放图片，点击图片可在新窗口打开”;
ImgD.onmousewheel = function img_zoom() //滚轮缩放
{
var zoom = parseInt(this.style.zoom, 10) || 100;
zoom += event.wheelDelta / 12;
if (zoom 0) this.style.zoom = zoom + “%”;
return false;
}
} else { //如果不是IE
ImgD.title = “点击图片可在新窗口打开”;
}
}
}
在需要实现等比缩放的图片上加上onload语句，图片装载时初始化大小。
具体实现代码如下:
img name=”” src=”” onload=”javascript:resizeimg(this,100,200)”
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/250937.html
微信扫一扫 
支付宝扫一扫 