http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
http://blog.1wanweb.com/post/Html5-Video.aspx
<!DOCTYPE html>
<html> <head>
<title>Simple JavaScript Controller</title>
<script src="jquery-1.4.2.min.js"></script>
<script>
function init() {
document.video = document.getElementByIdx_x("video");
webm = document.getElementByIdx_x("webm");
init_events();
// init_properties();
//setInterval(update_properties, 1000);
}
function init_events(){
if(true) { //监听video的各个属性
document.video.addEventListener();
}
}
</script>
<script>
var beginTime="";
var endTime="";
function record(){
Media = document.video = document.getElementByIdx_x("video");
beginTime = Media.currentTime;
$("#label1").html('<a href="javascript:stop();">停止</a>');
alert(beginTime);
}
function stop(){
endTime = Media.currentTime;
alert(endTime);
$("#label1").html('<label>开始记录时间</label><input id="begin" type="text" value='+beginTime+'></input><label value="结束记录时间"/> <label>结束记录时间</label><input id="stop" type="text" value='+endTime+'></input><button type="button" onclick="send()">上传</button>');
}
</script>
function send(){
}
</head>
<body > <div class="video-player" align="center">
<video controls="controls" id="video" >
<source src="movie.ogg" type="video/ogg">
<source src="战争背后.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br><div id="label1"> <a href="javascript:record();">记录</a> </div>
<br> </div>
</body>
</html>
<script src="jquery-1.4.2.min.js"></script>
<script>
function init() {
document.video = document.getElementByIdx_x("video");
webm = document.getElementByIdx_x("webm");
init_events();
// init_properties();
//setInterval(update_properties, 1000);
}
function init_events(){
if(true) { //监听video的各个属性
document.video.addEventListener();
}
}
</script>
<script>
var beginTime="";
var endTime="";
function record(){
Media = document.video = document.getElementByIdx_x("video");
beginTime = Media.currentTime;
$("#label1").html('<a href="javascript:stop();">停止</a>');
alert(beginTime);
}
function stop(){
endTime = Media.currentTime;
alert(endTime);
$("#label1").html('<label>开始记录时间</label><input id="begin" type="text" value='+beginTime+'></input><label value="结束记录时间"/> <label>结束记录时间</label><input id="stop" type="text" value='+endTime+'></input><button type="button" onclick="send()">上传</button>');
}
</script>
function send(){
}
</head>
<body > <div class="video-player" align="center">
<video controls="controls" id="video" >
<source src="movie.ogg" type="video/ogg">
<source src="战争背后.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br><div id="label1"> <a href="javascript:record();">记录</a> </div>
<br> </div>
</body>
</html>
事例2：
<!DOCTYPE html>
<html>
<body>
<button onclick="hasVidEnded()" type="button">该视频播放是否已结束？</button>
<div id="time"></div>
<br />
<br />
<video id="video1" controls="controls">
<source src="/example/html5/mov_bbb.mp4" type="video/mp4">
<source src="/example/html5/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video1");
setInterval(function(){
if(myVid){
document.getElementById("time").innerHTML=myVid.currentTime;
if(myVid.currentTime>3){
myVid.pause();// 3秒后暂停
}
}
},1000);
function hasVidEnded()
{
alert(myVid.ended);
}
</script>
</body>
</html>
<html>
<body>
<button onclick="hasVidEnded()" type="button">该视频播放是否已结束？</button>
<div id="time"></div>
<br />
<br />
<video id="video1" controls="controls">
<source src="/example/html5/mov_bbb.mp4" type="video/mp4">
<source src="/example/html5/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video1");
setInterval(function(){
if(myVid){
document.getElementById("time").innerHTML=myVid.currentTime;
if(myVid.currentTime>3){
myVid.pause();// 3秒后暂停
}
}
},1000);
function hasVidEnded()
{
alert(myVid.ended);
}
</script>
</body>
</html>
示例3：
<!DOCTYPE html><html> <head>
<title>Simple JavaScript Controller</title>
<script type="text/javascript">
function playPause() {
var myVideo = document.getElementsByTagName('video')[0];
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.height = (myVideo.videoHeight * 2 ) ;
}
function makeNormal() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.height = (myVideo.videoHeight) ;
}
</script>
</head>
<body>
<div class="video-player" align="center">
<video src="myMovie.m4v" poster="poster.jpg" ></video>
<br>
<a href="javascript:playPause();">Play/Pause</a> <br>
<a href="javascript:makeBig();">2x Size</a> |
<a href="javascript:makeNormal();">1x Size</a> <br>
</div>
</body>
</html>
相关推荐
html5中使用video.js播放器播放m3u8直播文件，兼容微信浏览器自动播放（亲测有效） 。
HTML5 video截取视频封面图片播放代码.zip
HTML5视频播放video标签使用方法.docxHTML5视频播放video标签使用方法.docx
H5（html5 video）视频播放禁止拖动进度条，不能快进，不能后退；微信公众号视频播放，视频播放后才能操作其他内容。 内含Java视频流播放，本人并不建议直接将视频路径放到src中，而是使用视频流方式获取
自定义美化HTML5 video视频播放器界面样式，漂亮的HTML5video视频界面
近期开始开发公司新版官网， 首页顶部（header）是一个全屏播放的小视频, 现简单总结如下： 页面代码 <?php if(!Helper::isMobile()) { ?> <video id=homeVideo class=home-video autoplay loop muted ...
H5的video标签跨域.HTML的video标签跨域 我们都知道HTML video标签能播放视频 但是如果你的video要播放的是非当前域名下的视频文件,这就要跨域播放视频, 应该如何实现呢?
这是一个完整的html5-video，下载，解压后可以立刻播放，里面的html5代码，js代码都是完整的！
HTML5标签video官方文档 十分详细
将使用HTML5提供的VideoAPI做一个自定义的视频播放器，需要用到HTML5提供的video标签、以及HTML5提供的对JavascriptAPI的扩展。
CKEditor 添加Video插件(MP4)并且兼容HTML5 Video插件 1:把video文件复制到ckeditor/plugins/下面 2：ckeditor/config.js 中添加如下： a:在toolbar中['Image','Flash','Video']，配置加入“Video” 项。 b:配置 ...
1、本文详细描述了html采用video播放hls视频流的方法及源代码。 2、通过详细示例，让读者更直观地阅读，更清晰的理解。 3、示例代码可直接复制，编译后可直接运行。 4、根据示例以及运行结果，让读者加强记忆及...
ckeditor4 视频插件html5-video功能增强，添加中文显示，新增添加封面的功能。内有用法示例，请丢在服务器里预览效果。
jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器html5 视频播放器 video示例 音频播放器 手机播放器
开关灯控制说明配置vWidth 控件宽vHeight 控件高vSrc 视频地址vZIndex z-index,默认100vShowLightSwitch 是否显示开关灯按钮回调GetInfo 获取信息GetVolume 获取音量GetCurrentTime 获取当前播放的时间返回...
一个移动端 H5 Video 标签播放视频的实现
html5-video-posterhtml5的多个video标签，截取视频源的封面图，放置到属性poster里面；增加监听视频播放状态的功能；
Accessible HTML5 Video Player 是一个轻量级的 HTML5 视频播放器，支持自定义字幕。功能特征：与自定义控件提供了一个 HTML5 视频播放器支持字幕：只需要使用标准 HTML5 视频语法的 VTT 字幕文件使用本地 HTML5 ...
CKEditor4.2只能增加flash播放格式，没有视频插件。这个插件允许插入和编辑新的HTML5<video>元素。该对话框允许指定的海报图像，尺寸（他们是根据预览自动调整）和两个源文件，这样既使用了WebM格式（Chrome...
微信小程序中使用video组件播放m3u8直播视频，在ios的真机预览里点击video中间的播放容易卡几十秒，此时什么都做不了，手机也非常非常卡。 我的解决办法是在视频video组件里加入custom-cache={{false}} autoplay=...