本文目录一览：
- 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
你要的是这样的效果么?
满意要给分哦,老大
