H5视频播放器

Posted 向前看！明天会更好！

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5视频播放器相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body {
    text-align: center;
}
#container {
    display: inline-block;
    margin: 0 auto;
    position: relative;
}
video {
    border: 1px solid #aaa;
    background: #000;
}
#ad {
    position: absolute;
    top: 150px;
    left: 150px;
}
#ad img {
    width: 300px;
    height: 200px;
    opacity: 0.9;
}
#ad p {
    position: absolute;
    top: 0px;
    right: 10px;
}
</style>
</head>

<body>
<div id="container">
  <video id="video" width="600" height="500" controls poster="1.jpg">
    <source src="birds.mp4">
  </video>
  <div id="ad"> <a href="http://www.baidu.com"><img src="0.jpg"></a>
    <p id="close">关闭</p>
  </div>
  <div>
    <button onClick="restart()">restart</button>
    <button onClick="slow()"><<</button>
    <button onClick="play()" value="play" id="btn">play</button>
    <button onClick="fast()">>></button>
    <button onClick="change(this)" value="放大屏幕">放大屏幕</button>
    <button onClick="change(this)" value="初始大小">初始大小</button>
    <button onClick="change(this)" value="缩小屏幕">缩小屏幕</button>
  </div>
</div>
</body>
</html>
<script type="text/javascript">
    var video = document.getElementById(‘video‘);
    var videoWidth = video.width;
    var videoHeight = video.height;
    var ad = document.getElementById(‘ad‘);
    var btn = document.getElementById(‘btn‘);
    var close = document.getElementById(‘close‘);
    video.onclick = function(){
            play();
        }
function play(){
        if(video.paused){    //获取当前是否是暂停状态
                video.play();
                btn.textContent=‘play‘;
            }else{
                    video.pause();
                    btn.textContent=‘stop‘;
                }
    }
video.onpause = function(){    //当视频暂停时，广告显示
                            ad.style.display="inline-block";
                        }
video.onplay = function(){    //当视频播放时，广告隐藏
                            ad.style.display="none";
                        }
close.onclick = function(){    //点击按钮，关闭广告
                            ad.style.display=‘none‘;
                        }
function change(btn){
            if(btn.value==‘放大屏幕‘){
                        videoWidth*=1.1;
                        videoHeight=1.1*videoHeight;
            }else if(btn.value=="初始大小"){
                            videoWidth=600;
                            videoHeight=500;
            }else{
                    videoWidth*=0.9;
                    videoHeight=0.9*videoHeight;
                }
                    video.width=videoWidth;
                    video.height=videoHeight;
                    var www=document.defaultView.getComputedStyle(container,null).width;//获得宽度
                    var hhh=document.defaultView.getComputedStyle(container,null).height;//获得高度
                    www=parseFloat(www);//把字符串转换成数值
                    hhh=parseFloat(hhh);//把字符串转换成数值
                    ad.style.top=hhh/2-115+‘px‘;
                    ad.style.left=www/2-150+‘px‘;
                    }
function restart(){        //重新播放
        video.currentTime=0;
    }
function fast(){        //快进方法，每次快进10秒
        video.currentTime+=10;
    }
    function slow(){    //后退方法，每次后退10秒
        video.currentTime-=10;
        }
</script>

 

以上是关于H5视频播放器的主要内容，如果未能解决你的问题，请参考以下文章

为啥微信测试H5视频可以播放,上线后播放不了

如何在片段中播放视频

小白学前端化腐朽为神奇-H5-播放音频视频（day02-5）

h5 video 视频播放开发 和 问题集合

java后台读取视频文件获取视频流后使用h5进行播放/下载

java后台读取视频文件获取视频流后使用h5进行播放/下载