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

最新推荐文章于 2025-05-28 17:18:20 发布

我是黄老邪

最新推荐文章于 2025-05-28 17:18:20 发布

阅读量5.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web JavaScript 文章标签： html javascript

本文链接：https://blog.youkuaiyun.com/dezhihuang/article/details/78388175

JavaScript 同时被 2 个专栏收录

5 篇文章

订阅专栏

Web

4 篇文章

订阅专栏

本文介绍了一种结合HTML5和Flash技术实现的视频播放方案。该方案利用HTML5的video标签播放mp4格式视频，并在不支持HTML5的情况下采用Flash播放swf格式视频。通过自定义播放控制和模态对话框实现视频的自动居中显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

默认使用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="http://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()">
<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')">X</button>
    <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>