javascript html5視頻播放器

款很棒的 HTML5 視頻播放器作為下一代的網頁語言，HTML5 擁有很多讓人期待已久的新特性，其中之一就是 video 標簽，讓開發(fā)者可以在網頁中和添加圖片一樣簡單的方式添加視頻。1、VideoJSVideoJS 是最流行的 HTML5 視頻播放器，免費、開源，可使用 CSS 輕松定制皮膚，支持全屏，在不支持的瀏覽器自動切換為 Flash 播放。2、SublimeVideoSublimeVideo 是一個獨特的基于云概念的 HTML5 視頻播放器，功能強大，可惜不是免費的。3、Open Standard Media (OSM) Player由 Alethia Inc 開發(fā)，是集全功能于一體的網絡播放器，非常不錯。4、Video for EverybodyVideo for Everybody 讓你在網頁中嵌入一小段代碼就能支持 HTML5 視頻，在不支持的瀏覽器中自動切換為 Flash 播放。5、Kaltura HTML5Kaltura 的 HTML5 視頻解決方案 – 兼容所有主流瀏覽器，采用獨特的 fallback 機制。6、FlareVideoFlareVideo 由 Alex MacCaw 開發(fā)，他是一位Ruby/JS開發(fā)者，FlareVideo主要特色：在不支持 HTML5 視頻的情況，用Flash作為替代方案可輕松自定義主題支持全屏完全開源和免費用于商業(yè)用途7、Projekktor全文

我們提供的服務有：成都網站設計、成都網站制作、微信公眾號開發(fā)、網站優(yōu)化、網站認證、科爾沁右翼前ssl等。為近千家企事業(yè)單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的科爾沁右翼前網站制作公司

javascript里面需要上傳視頻，如何做到本地預覽視頻

input type="file" accept="video/*" onChange={this.previewVideo} /

video?id="myVideo"?autoPlay?width="300"?/

使用FileReader讀取轉為Data URL：

previewVideo?=?(file)?=?{

//?建議判斷下視頻大小及格式，太大的可能會有問題

const?reader?=?new?FileReader();

reader.onload?=?(evt)?=?{

const?myVideo?=?document.querySelector("#myVideo");

myVideo.src?=?evt.target.result;

};

reader.readAsDataURL(file);

}

怎樣用javascript控制視頻，使之“鼠標單擊全屏顯示”

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

script language="javascript"

function vopen(){

var num = 0;

var vkai = document.getElementById("kai");

var vguan = document.getElementById("guan");

var vdiv = document.getElementById("video");

vdiv.style.display="block";

vkai.style.display="none";

vguan.style.display="block";

document.getElementById("MediaPlayer").controls.play();

document.getElementById("MediaPlayer").ShowControls = -1;

document.getElementById("xianshi").style.display = "block";

}

function dofull(){

document.getElementById("MediaPlayer").fullScreen = 1;

vopen();

}

function vclose(){

var vkai = document.getElementById("kai");

var vguan = document.getElementById("guan");

var vdiv = document.getElementById("video");

vdiv.style.display="none";

vkai.style.display="block";

vguan.style.display="none";

document.getElementById("MediaPlayer").controls.stop();

document.getElementById("xianshi").style.display = "none";

}

/script

title無標題文檔/title

/head

body

div class="container"

div class="vleft"

div id="video" style="display:none;"

object id="MediaPlayer" class="vplayer" width="600px" height="560px" classid="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6"

param name="URL" value="video.wmv"

param name="autoStart" value="0"

param name="ShowControls" value="-1"

param name="PlayCount" value="10000000"

param name="ShowPositionControls" value="-1"

param name="ShowAudioControls" value="-1"

param name="uiMode" value="none"

param name="ShowTracker" value="-1"

param name="ShowDisplay" value="-1"

param name="ShowStatusBar" value="-1"

param name="enabled" value="-1"

param name="SendMouseClickEvents" value="1"

param name="SendMouseMoveEvents" value="1"

param name="DisplaySize" value="0"

/object

/div

/div

div class="vright"

div class="xpage"a href="javascript:window.history.go(-1)" target="_self"img src="images/X2.png" //a/div

div class="rightpic"/div

div class="vbut" id="kai" onclick="vopen()" style="cursor:hand;"點擊看視頻/div

div class="vbut" id="xianshi" onclick="dofull()" style="cursor:hand;display:none"點擊全屏/div

div class="vbut" id="guan" onclick="vclose()" style="cursor:hand; display:none;"關閉視頻/div

div class="vbut" id="back" onclick="javascript:window.history.go(-1)" style="cursor:hand;"返回/div

/div

/div

/body

/html

你要的是這樣的效果么?

滿意要給分哦,老大

高手，用javascript代碼調用一個本地視頻，讓這個視頻在網頁中全屏播放，如何寫代碼啊

使用這個，注意路徑中不要使用中文

object id="player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" style="width: 682px; height: 371px"

param NAME="AutoStart" VALUE="-1"

!--是否自動播放--

param NAME="Balance" VALUE="0"

!--調整左右聲道平衡,同上面舊播放器代碼--

param name="enabled" value="-1"

!--播放器是否可人為控制--

param NAME="EnableContextMenu" VALUE="-1"

!--是否啟用上下文菜單--

param NAME="url" VALUE="D:\aa.flv"

!--播放的文件地址--

param NAME="PlayCount" VALUE="1

!--播放次數控制,為整數--

param name="rate" value="1"

!--播放速率控制,1為正常,允許小數,1.0-2.0--

param name="currentPosition" value="0"

!--控件設置:當前位置--

param name="currentMarker" value="0"

!--控件設置:當前標記--

param name="defaultFrame" value=""

!--顯示默認框架--

param name="invokeURLs" value="0"

!--腳本命令設置:是否調用URL--

param name="baseURL" value=""

!--腳本命令設置:被調用的URL--

param name="stretchToFit" value="0"

!--是否按比例伸展--

param name="volume" value="50"

!--默認聲音大小0%-100%,50則為50%--

param name="mute" value="0"

!--是否靜音--

param name="uiMode" value="Full"

!--播放器顯示模式:Full顯示全部;mini最簡化;None不顯示播放控制,只顯示視頻窗口;invisible全部不顯示--

param name="windowlessVideo" value="0"

!--如果是0可以允許全屏,否則只能在窗口中查看--

param name="fullScreen" value="0"

!--開始播放是否自動全屏--

param name="enableErrorDialogs" value="-1"

!--是否啟用錯誤提示報告--

param name="SAMIStyle" value

!--SAMI樣式--

param name="SAMILang" value

!--SAMI語言--

param name="SAMIFilename" value

!--字幕ID--

/object

javascript視頻切換代碼（html）

script language='javascript'

function play(url) {

var player_box = document.getElementById('player_box');

player_box.innerHTML = "embd href="+url+"/embd";

}

/script

MV的鏈接

a href='javascript:play("/path/to/the/mv.wmv");'MV 1/a

表格中包含播放器的單元格

table

tr

td id='player_box'/td

/tr

/table

從哪里可以找到javascript免費的教學視頻呢？

關于javascript免費的教學視頻：

你可以耐心看一下“馬士兵的JAVA視頻教程”，循序漸進、由淺入深，而且講的通俗易懂，是一份難得的教材。

下載的話，verycd上就有，或者直接百度一下"馬士兵"就行!

分享標題：javascript視頻的簡單介紹
標題來源：http://chinadenli.net/article7/dsehiij.html

成都網站建設公司_創(chuàng)新互聯，為您提供手機網站建設、網站維護、App開發(fā)、企業(yè)網站制作、網頁設計公司、網站收錄

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯