核心提示：默认使用html5播放mp4视频文件，当不支持html5播放时则使用flash插件播放swf视频文件。使用 object 和 embed 标签加载 Flash 插件。flash视频播放的控制(如播放、...
默认使用html5播放mp4视频文件，当不支持html5播放时则使用flash插件播放swf视频文件。
使用 object 和 embed 标签加载 Flash 插件。
flash视频播放的控制(如播放、暂停、快进、快退等)需要自己写代码，参考网页中怎样控制Flash的播放与停止。
使用模态对话框作为视频播放窗口，并且自动居中显示。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>视频播放</title>
<style type="text/css">
.playBtn {
background-color:#79bbff;
border-radius:50%;
outline: 0px;
border:1px solid #337bc4;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:1.5em;
font-weight:bold;
text-shadow:0px 1px 0px #528ecc;
letter-spacing: 8.0pt;
height: 9em;
width: 9em;
}
.playBtn:hover {
background-color:#378de5;
}
#video_overlay {
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
z-index:60000;
background-color: #000;
opacity: 0.9;
}
.videoDiv {
top: 0%;
left: 0%;
position: fixed;
cursor: move;
display: none;
z-index:60001;
}
.close {
position:absolute;
//background:url(images/close.png) no-repeat;
background: #FFE4B5;
float: left;
border:0px;
width: 3em;
height: 3em;
cursor: pointer;
outline:0;
z-index: 60001;
}
.close:hover{
cursor:pointer;
//background:url(images/close_hover.png) no-repeat;
background: #FDF5E6;
}
</style>
<script type="text/javascript">
function videoAutoCenter()
{
document.getElementById("videoDivId").width = document.getElementById("demoVideo").width;
//获取可见窗口大小
var bodyW = document.documentElement.clientWidth;
var bodyH = document.documentElement.clientHeight;
//获取对话框宽、高
var elW = document.getElementById("videoDivId").offsetWidth;
var elH = document.getElementById("videoDivId").offsetHeight;
var flashPlayer = document.getElementsByTagName("embed")[0];
if (typeof flashPlayer != "undefined") {
elW = elW > flashPlayer.offsetWidth ? elW : flashPlayer.offsetWidth;
elH = elH > flashPlayer.offsetHeight ? elH : flashPlayer.offsetHeight;
}
//视频窗口居中显示
document.getElementById("videoDivId").style.marginLeft = (bodyW - elW)/2 + 'px';
document.getElementById("videoDivId").style.marginTop = (bodyH - elH)/2 + 'px';
}
function resize() {
videoAutoCenter();
}
function videoPlay() {
var videoPath = "./videos/video.mp4";
var videoPath2 = "./videos/video.swf";
document.getElementById("video_overlay").style.display = "block";
document.getElementById("videoDivId").style.display = "block";
//动态设置视频文件路径
document.getElementsByTagName("video")[0].setAttribute("src", videoPath);
document.getElementsByTagName("source")[0].setAttribute("src", videoPath);
var embedDiv = document.getElementById("embedDivId");
embedDiv.innerHTML = '<embed src=' + videoPath2 + ' width="800px" height="500px" type="application/x-shockwave-flash" pluginspage="https://www.macromedia.com/go/getflashplayer" /> ';
var player = document.getElementById("demoVideo");
if (typeof player != "undefined") {
if (typeof(player.play) == "function") {
player.play();
}
}
videoAutoCenter();
}
function cancle(idName) {
document.getElementById("video_overlay").style.display = "none";
document.getElementById(idName).style.display = "none";
//停止视频播放
if (idName == "videoDivId") {
var player = document.getElementById("demoVideo");
if (typeof player != "undefined") {
if (typeof player.pause == "function") {
player.pause();
return;
}
}
var flashPlayer = document.getElementsByTagName("embed")[0];
if (typeof flashPlayer != "undefined") {
flashPlayer.StopPlay();
}
}
}
//快进
function fastForward() {
var flashPlayer = document.getElementsByTagName("embed")[0];
if (typeof flashPlayer == "undefined") {
return;
}
flashPlayer.GotoFrame(flashPlayer.CurrentFrame() + 100);
flashPlayer.Play();
}
//快退
function fastRewind()
{
var flashPlayer = document.getElementsByTagName("embed")[0];
if (typeof flashPlayer == "undefined") {
return;
}
flashPlayer.GotoFrame(flashPlayer.CurrentFrame() - 100);
flashPlayer.Play();
}
//暂停
function pause()
{
var flashPlayer = document.getElementsByTagName("embed")[0];
if (typeof flashPlayer == "undefined") {
return;
}
flashPlayer.StopPlay();
}
//播放
function play()
{
var flashPlayer = document.getElementsByTagName("embed")[0];
if (typeof flashPlayer == "undefined") {
return;
}
flashPlayer.Play();
}
</script>
</head>
<body onresize="resize()">
<p style="margin: 10% auto; width: 10%;">
<button class="playBtn" onclick="videoPlay()">视频播放</button>
</p>
<p id="video_overlay" class="video_overlay"></p>
<p class="videoDiv" name="videoDiv" id="videoDivId">
<button class="close" name="close" onclick="cancle('videoDivId')">X</button>
<video id="demoVideo" width="800px" height="500px" controls="controls">
<source src="" type="video/mp4">
<object width="800px" height="500px" align="middle">
<p id="embedDivId"></p>
<p style="width:800px">
<button style="width:100px;margin-right:100px;float:left;" onclick="fastRewind()"> 快退 </button>
<button style="width:100px;margin-right:0px;float:right;" onclick="fastForward()"> 快进 </button>
<button style="width:100px;margin-right:100px;float:left;" onclick="pause()">暂停</button>
<button style="width:100px;margin-right:100px;float:right;" onclick="play()">播放</button>
</p>
</object>
</video>
</p>
</body>
</html>
