html5 怎么点一个按钮,播放一个相应的视频
最好能写出一部分的代码，供我学习
在当前网页做成像一个播放器的那种形式，点击一个条目，就播放一段相对应的视频。 展开
【方法步骤】：
首先下载video.js，百度一下就能找到；
这个是下载后的目录；
先把要用到的js\css.swf都加载到html页面上。如：
<link href="video-js/video-js.css" rel="stylesheet" type="text/css">
<script src="video-js/video.js"></script>
<script>
videojs.options.flash.swf = "video-js/video-js.swf";
</script>
加入下面的代码：
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto"width="640"height="480"poster="video-js/my_video_poster.png" data-setup="{}"> <source src="Wildlife.mp4" type='video/mp4'> </video>
只要记住：修改width="640" height="480"来改变视频显示大小，修改src="Wildlife.mp4"来改变要显示的视频；
然后打开html文件查看效果吧，它有暂停、音量控制、全屏等功能，还有好多其他功能，比如字幕等，这个以后再写。
【注意事项】：
如果是IE浏览器就将视频替换为传统的以FLASH形式播放；
解决IE不能播放的问题很简单。加入：<script>if (navigator.userAgent.indexOf('MSIE') >= 0){ document.getElementById("videoDiv").innerHTML='<embed src="Wildlife.mp4" autostart="true" loop="true" width="640" height="480" >'; } </script>；
在信息量越来越大的今天，越来越多的网站重视数据信息的多样化与个性化，随着多媒体技术逐渐发展提高，在线展示视频、音频、PPT、图表等技术也越来越多地应用到了各行各业中，无论是企业还是个人，都在改变着自己的网站风格。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test1</title>
</head>
<body>
<video src="movie.webm" controls="controls" id="video">
您的破浏览器都是古董了，早该换了，不然休想看我们的小电影(*´・v・)
</video>
<br/>
<button onclick="bofang()">播放</button>
<button onclick="zanting()">暂停</button>
<button onclick="kuaijin()">快进10秒</button>
<button onclick="kuaitui()">快退10秒</button>
<button onclick="shutup(this)">闭嘴</button>
<button onclick="soso()">加速播放</button>
<button onclick="yu()">减速播放</button>
<button onclick="normal()">正常播放</button>
<button onclick="upper()">提高嗓门</button>
<button onclick="lower()">降低嗓门</button>
<script>
var video=document.getElementById("video");
//播放方法
function bofang(){
video.play();
}
//暂停
function zanting(){
video.pause();
}
//快进
function kuaijin(){
video.currentTime+=10;
}
//快退
function kuaitui(){
video.currentTime-=10;
}
//静音
function shutup(obj){
if(video.muted){
obj.innerHTML="闭嘴";
video.muted=false;
}else{
obj.innerHTML="张嘴";
video.muted=true;
}
}
//加速(3)
function soso(){
video.playbackRate=3;
}
//减速（3）
function yu(){
video.playbackRate=1/3;
}
function normal(){
video.playbackRate=1;
}
//调高声音
function upper(){
video.volume+=0.3;
}
//降低声音
function lower(){
video.volume-=0.3;
}
</script>
</body>
</html>
这里有个简单的HTML5视频播放代码：
http://www.w3school.com.cn/tiy/t.asp?f=html5_video_all
<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg">
<source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
W3C的这个是播放一个视频，我找到了一个方法能在W3C上使用，但是到了本地就无法进行视频切换~！
切换的话，需要添加JS。
你就告诉下我呗，我就25个财富点啊~
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5视频播放器</title>
</head>
<body>
<video id="myVideo">你的浏览器不支持video标签</video>
<a href="#" onClick="playlist(this)" id="jieba4">街霸</a>
<a href="#" onClick="playlist(this)" id="narutoop3">铁拳</a>
<script>
function playlist(a){
var MV=document.getElementById("myVideo");
MV.src=a.id+'.mp4';
MV.play();
}
</script>
</body>
</html>
|
广告 您可能关注的内容 |
