js製作網頁視頻（js製作網頁案例）

本文目錄一覽：

• 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)”