HTML播放视频(兼容IE低版本)

  • 默认使用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 = ' ';

    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()">
<div style="margin: 10% auto; width: 10%;">
    <button class="playBtn" onclick="videoPlay()">视频播放button>
div>

<div id="video_overlay" class="video_overlay">div>
<div class="videoDiv" name="videoDiv" id="videoDivId">
    <button class="close" name="close" onclick="cancle('videoDivId')">Xbutton>
    <video id="demoVideo" width="800px" height="500px" controls="controls">
      <source src="" type="video/mp4">
      <object width="800px" height="500px" align="middle">
        <div id="embedDivId">div>
        <div 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>
        div>        
      object> 
    video>
div>
body>
html>

免费在线视频转换:https://www.aconvert.com/cn/

你可能感兴趣的:(Web,JavaScript)