本文目录一览：
1、javascript里面需要上传视频，如何做到本地预览视频
2、[javascript html5视频播放器](#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 标签，让开发者可以在网页中和添加图片一样简单的方式添加视频。
- VideoJS
VideoJS 是最流行的 HTML5 视频播放器，免费、开源，可使用 CSS 轻松定制皮肤，支持全屏，在不支持的浏览器自动切换为 Flash 播放。 - SublimeVideo
SublimeVideo 是一个独特的基于云概念的 HTML5 视频播放器，功能强大，可惜不是免费的。 - Open Standard Media (OSM) Player
由 Alethia Inc 开发，是集全功能于一体的网络播放器，非常不错。 - Video for Everybody
Video for Everybody 让你在网页中嵌入一小段代码就能支持 HTML5 视频，在不支持的浏览器中自动切换为 Flash 播放。 - Kaltura HTML5
Kaltura 的 HTML5 视频解决方案兼容所有主流浏览器，采用独特的 fallback 机制。 - FlareVideo
由 Alex MacCaw 开发，他是一位 Ruby/JS 开发者，FlareVideo 主要特色：- 在不支持 HTML5 视频的情况，用 Flash 作为替代方案
- 可轻松自定义主题
- 支持全屏
- 完全开源和免费用于商业用途
- Projekktor
全文
javascript视频切换代码（html）
<script language='javascript'>
function play(url) {
var player_box = document.getElementById('player_box');
player_box.innerHTML = "<embed href='"+url+"' />";
}
</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>
你要的是这样的效果么？
满意要给分哦,老大
