js手写一个视频播放h5

最新推荐文章于 2022-05-19 21:11:17 发布

雕琢时光纸戆

最新推荐文章于 2022-05-19 21:11:17 发布

阅读量731

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/TISRNW/article/details/103229818

版权

html 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

效果图

css代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视频播放器</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        html,
        body {
            background-color: white;
        }
        .wrap{
            position: relative;
            width: 700px;
            overflow: hidden;
        }
        #current {
            float: left;
        }

        .progress {
            height: 4px;
            width: 700px;
            background-color: gray;
            cursor: pointer;
        }

        .percent {
            width: 0px;
            height: 4px;
            background-color: red;
            position: relative;
        }
        #xiaoyuandian{
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #d2413a;
            position: absolute;
            right: -4px;
            top: -2px;
            cursor: pointer;
        }
        #volume {
            width: 300px;
            height: 5px;
            background-color:gray;
            margin: 20px auto 10px 0px;

            display: none;
            transition: all .3s;
        }

        #setVolume {
            width: 30%;
            height: 100%;
            background-color: tomato;
            position: relative;
        }

        #setVolumeBtn {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #d2413a;
            position: absolute;
            right: -4px;
            top: -2px;
            cursor: pointer;
            display: none;
        }
        #yinliang{
            margin: 10px 5px 10px 10px ;
        }
        .controls-bar{
            position: relative;
        }
        #fullScreen{
            position: absolute;
            top: 0px;
            left: 670px;
        }
        #fullScreen:hover{
            box-shadow: 3px 3px 3px 0px wheat  ;
        }
        #playPause{
            float: left;
            position: relative;
            left: 350px;
            top: -73px;
        }
        #play{
            position: absolute;
            left: 0px;
            z-index: 100;
        }
        #pause{
            position: absolute;
            left: 0px;
            z-index: 90;
            display: none;
        }
        .danmu{
            position: absolute;
            left: 700px;
            top: 30px;
            transition: 5s linear;
            color: brown;
        }
        .danmu.active{
            left: -1000px;
            z-index: 100px;
        }
    </style>

</head>

<body>
    <div id="wrap">
        <video src="爱情36计 -蔡依林.mp4" id="video" width="700px"></video>
        <div class="controls-bar">
            <!-- 时间展示 -->
            <div class="time-diaplay">
                <span id="current"></span> / <span id="duration"></span>
            </div>
            <!-- 进度条展示 -->
            <div class="progress">
                <div class="percent" id="percent">
                    <!-- 进度条的小圆点 -->
                    <div id="xiaoyuandian"></div>
                </div>
            </div>
            <div style="display: flex;">
                <!-- 音量控制 -->
                <img src="音量.png" height="25px" width="25px" id="yinliang">
                <div id="volume">
                    <div id="setVolume">
                        <div id="setVolumeBtn"></div>
                    </div>
                </div>


            </div>
            <!-- 全屏按钮 -->
            <button type="button" id="fullScreen" style="height: 20px;width: 30px;font-size: 12px;text-align: center;">全屏</button>

            <!-- 播放或者暂停 -->
            <div id="playPause"> 
                    <img id="play" src="播放.png" alt="" width="25px" height="25px">
                    <img id="pause" src="暂停.png" alt="" width="25px" height="25px">
            
            </div>
          
        </div>
        
                <p class="danmu"></p>
        
        
    </div>

    <script src="video.js">



    </script>

</body>

</html>

js代码




var video = document.getElementById('video')

//时间展示
var currentElemen = document.getElementById('current')
var durationElemen = document.getElementById('duration')
//将秒转换为分钟
var secondsToMins = function (seconds) {
    seconds = parseInt(seconds)
    var min = parseInt(seconds / 60)
    var s = seconds % 60
    min = min > 9 ? min : '0' + min
    s = s > 9 ? s : '0' + s
    var mins = min + ':' + s
    return mins
}

//初始化时间
currentElemen.innerHTML = secondsToMins(video.currentTime)

video.addEventListener('canplaythrough', function () {
    //填充总时间
    durationElemen.innerHTML = secondsToMins(video.duration)
})
//不断更新当前时间
video.addEventListener('timeupdate', function () {
    currentElemen.innerHTML = secondsToMins(video.currentTime)
    var percent = getPercent()
    setPercent(percent)
    progressDanmu()
})

//进度条展示
//怎么知道视频播放到了哪里
var progressElement = document.getElementsByClassName('progress')[0]
var percentElement = document.getElementById('percent')
var xiaoyuandianElement = document.getElementById('xiaoyuandian')
xiaoyuandianElement.addEventListener('mousedown', function (event) {
    var e = event || window.event
//    document.onmousemove = function(){
//     var progressWidth = 0
//         progressWidth = e.clientX
//         percentElement.style.width = e.clientX + 'px'
//        video.currentTime = (e.clientX / 700) * video.duration
//    }
   
    xiaoyuandianElement.addEventListener('mousemove', function (event) {
        var e = event || window.event
        var progressWidth = 0
        progressWidth = e.clientX
        percentElement.style.width = e.clientX + 'px'
        video.currentTime = (e.clientX / 700) * video.duration
    })
   
})
xiaoyuandianElement.addEventListener('mouseup',function(event){
 var e = event || window.event
 xiaoyuandianElement.onmousemove = null
})
// document.onmouseup = function(){
//     document.onmousemove = null}


//点击进度条跳转进度
progressElement.addEventListener('click', function (event) {
    var e = event || window.event
    var progressWidth = 0
    progressWidth = e.clientX
    percentElement.style.width = e.clientX + 'px'
    video.currentTime = (e.clientX / 700) * video.duration
})
var getPercent = function () {
    return video.currentTime / video.duration
}
var setPercent = function (percent) {
    percentElement.style.width = percent * 700 + 'px'
}





//音量控制
var totalVolume = document.getElementById('volume')
var volume = document.getElementById('setVolume')
var setVolumeBtn = document.getElementById('setVolumeBtn')
var yinLiang = document.getElementById('yinliang')
//拖动设置音量
setVolumeBtn.onmousedown = function (event) {//这个函数时在你鼠标落下的时候出发
    //触发的时候记录你鼠标点下的位置
    //然后触发鼠标移动时间
    var e = event || window.event

    document.onmousemove = function () {
        //鼠标移动事件触发changeVolume这个函数
        changeVolume()
    }
}
//拖动后弹起鼠标不做任何操作
 document.onmouseup = function () {
     //鼠标抬起来的操作，不用做任何操作
    document.onmousemove = null }
//点击音量条跳至相应音量
totalVolume.onclick = function () {
    //鼠标点击事件
    changeVolume()
}
//鼠标进入音量条时出现按钮
totalVolume.onmouseover = function () {
    setVolumeBtn.style.display = 'block'
}
//鼠标离开音量条时候按钮消失
totalVolume.onmouseout = function () {
    setVolumeBtn.style.display = 'none'
}
//音量改变
function changeVolume(event) {
    var e = event || window.event

    var volumeWidth = 0
    volumeWidth = e.clientX - totalVolume.offsetLeft//offsetLeft可以判断一个物体的跟document的左边距离，也就是浏览器左边缘。
    //写一个div 获取这个div之后你的div.offsetLeft就可以距离浏览器左边的距离。
    //所以上一句代码的意思是  用你点击的位置减去进度条距离浏览器左边的距离，就是你在进度条中的宽度
    if (volumeWidth < 0) {
        volumeWidth = 0
    } else if (volumeWidth > totalVolume.offsetWidth) {
        volumeWidth = totalVolume.offsetWidth
    }
    volume.style.width = volumeWidth + 'px' //将你在进度条中的宽度赋予给volume的样式中
    setVolume()//将宽度转化为音量
}
//音量-宽度转换
function setVolume() {
    var theTotalWidth = totalVolume.offsetWidth
    var theWidth = volume.offsetWidth
    video.volume = theWidth / theTotalWidth
    //见页面中  就是红色区域的宽度除于整个进度条的宽
}
//点击出现音量条
var isShowing = false
yinLiang.addEventListener('click', function () {
    if (isShowing) {
        totalVolume.style.display = 'none'
        isShowing = false
    } else {
        totalVolume.style.display = 'block'
        isShowing = true
    }

})
//进入全屏和退出全屏
var fullScreenButton = document.getElementById('fullScreen')
fullScreenButton.addEventListener('click', function () {
    video.webkitRequestFullscreen()
})
//播放暂停
var playing = document.getElementById('play')
var pauseing = document.getElementById('pause')
var isPlaying = false
video.addEventListener('click', function () {
    if (isPlaying) {
        video.pause()
        isPlaying = false
        playing.style.display = 'block'
        pauseing.style.display = 'none'


    } else {
        video.play()
        isPlaying = true
        playing.style.display = 'none'
        pauseing.style.display = 'block'
        playing.style.zIndex = '50'
    }
})

playing.addEventListener('click', function () {
    video.play()
    playing.style.display = 'none'
    playing.style.zIndex = '50'
    pauseing.style.display = 'block'
})
pauseing.addEventListener('click', function () {
    video.pause()
    playing.style.display = 'block'
    playing.style.zIndex = '100'
    pauseing.style.display = 'none'
})
//第一个 拽动进度条和点击进度条改变进度
//音量控制
//全屏退出全屏
//开始播放结束播放

//弹幕
var wrap = document.getElementById('wrap')

var danmuList = [
    {
        time: 5000,
        content: '她的身材真的好'
    }, {
        time: 12000,
        content: '她长得很美'
    },
    {
        time: 20000,
        content: '喜欢他的特务及'
    }
]
//给弹幕排序
var orderDanmu = function () {
    //从小到大
    danmuList.sort(function (a, b) {
        return a.time - b.time

        //从大到小
        //return b-a
    })
}
orderDanmu()

var sendDanmu = function(content){
    var p = document.createElement('p')
    p.className = 'danmu'
    p.style.top = Math.random()* 300   +'px'
    p.innerHTML = content
   wrap.appendChild(p)
   setTimeout(function(){
       p.className = 'danmu active'
   },100)
   setTimeout(function(){
       wrap.removeChild(p)
   },5000)
}

var progressDanmu = function(){
    //对比当前时间和第一条弹幕的时间
    if( danmuList[0] && danmuList[0].time - video.currentTime*1000 < 300){
      //发送
      
      
   sendDanmu(danmuList.shift().content)
    }
}





// 网页可见区域宽： document.body.clientWidth;

// 网页可见区域高： document.body.clientHeight;

// 网页可见区域宽： document.body.offsetWidth (包括边线的宽);

// 网页可见区域高： document.body.offsetHeight (包括边线的宽);

// 网页正文全文宽： document.body.scrollWidth;

// 网页正文全文高：document.body.scrollHeight;

// 网页被卷去的高： document.body.scrollTop;

// 网页被卷去的左： document.body.scrollLeft;

// 网页正文部分上： window.screenTop;

// 网页正文部分左： window.screenLeft;

// 屏幕分辨率的高： window.screen.height;

// 屏幕分辨率的宽： window.screen.width;

// 屏幕可用工作区高度： window.screen.availHeight;

// 屏幕可用工作区宽度：window.screen.availWidth;

// scrollHeight: 获取对象的滚动高度。

// scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

// scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

// scrollWidth:获取对象的滚动宽度

// offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

// offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

// offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

// event.clientX 相对文档的水平座标

// event.clientY 相对文档的垂直座标

// event.offsetX 相对容器的水平坐标

// event.offsetY 相对容器的垂直坐标

// document.documentElement.scrollTop 垂直方向滚动的值

// event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

雕琢时光纸戆

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js手写一个视频播放h5

css代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-...
复制链接

扫一扫

专栏目录