關於javascript視頻的信息

本文目錄一覽：

• 1、javascript裏面需要上傳視頻，如何做到本地預覽視頻
• 2、javascript html5視頻播放器
• 3、javascript視頻切換代碼（html）
• 4、怎樣用javascript控制視頻，使之「鼠標單擊全屏顯示」

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 html5視頻播放器

款很棒的

HTML5

視頻播放器作為下一代的網頁語言，HTML5

擁有很多讓人期待已久的新特性，其中之一就是

video

標籤，讓開發者可以在網頁中和添加圖片一樣簡單的方式添加視頻。1、VideoJSVideoJS

是最流行的

HTML5

視頻播放器，免費、開源，可使用

CSS

輕鬆定製皮膚，支持全屏，在不支持的瀏覽器自動切e799bee5baa6e4b893e5b19e31333433623063換為

Flash

播放。2、SublimeVideoSublimeVideo

是一個獨特的基於雲概念的

HTML5

視頻播放器，功能強大，可惜不是免費的。3、Open

Standard

Media

(OSM)

Player由

Alethia

Inc

開發，是集全功能於一體的網絡播放器，非常不錯。4、Video

for

EverybodyVideo

for

Everybody

讓你在網頁中嵌入一小段代碼就能支持

HTML5

視頻，在不支持的瀏覽器中自動切換為

Flash

播放。5、Kaltura

HTML5Kaltura

的

HTML5

視頻解決方案

–

兼容所有主流瀏覽器，採用獨特的

fallback

機制。6、FlareVideoFlareVideo

由

Alex

MacCaw

開發，他是一位Ruby/JS開發者，FlareVideo主要特色：在不支持

HTML5

視頻的情況，用Flash作為替代方案可輕鬆自定義主題支持全屏完全開源和免費用於商業用途7、Projekktor全文

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控制視頻，使之「鼠標單擊全屏顯示」

!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

你要的是這樣的效果么?

滿意要給分哦,老大