javascript视频的简单介绍

javascript html5视频播放器

款很棒的 HTML5 视频播放器作为下一代的网页语言，HTML5 拥有很多让人期待已久的新特性，其中之一就是 video 标签，让开发者可以在网页中和添加图片一样简单的方式添加视频。1、VideoJSVideoJS 是最流行的 HTML5 视频播放器，免费、开源，可使用 CSS 轻松定制皮肤，支持全屏，在不支持的浏览器自动切换为 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全文

相关问答

Q1: 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);

}

Q2: 怎样用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

你要的是这样的效果么?

满意要给分哦,老大

Q3: 高手，用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

Q4: 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

Q5: 从哪里可以找到javascript免费的教学视频呢？

关于javascript免费的教学视频：

你可以耐心看一下“马士兵的JAVA视频教程”，循序渐进、由浅入深，而且讲的通俗易懂，是一份难得的教材。

下载的话，verycd上就有，或者直接百度一下"马士兵"就行!