登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

查看: 4126|回复: 0

HTML5 视频播放(video),JavaScript控制视频,html5 video播放视频

[复制链接]

197

主题

580

帖子

1055

金钱

手工艺人

发表于 2018-10-8 13:52:06 | 显示全部楼层 |阅读模式

                    

        API:http://www.w3school.com.cn/jsref/dom_obj_video.asp

        demo.html:

[Java] 查看源文件 复制代码
[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p][p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p][p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]Documenttitle>[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p][p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]figcaption{[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]text-align:center;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]line-height:150px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]font-family:"MicrosoftYahei";[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]font-size:24px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]}[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p].player{[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]width:720px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]height:360px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]margin:10pxauto;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]border:1pxsolid#000;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]background-color:#000;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]position:relative;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]border-radius:6px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]}[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p].playervideo{[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]width:720px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]height:360px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]}[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p].controls{[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]width:700px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]height:40px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]background-color:rgba(255,255,0,0.3);[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]position:absolute;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]bottom:10px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]left:10px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]border-radius:10px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]}[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p].switch{[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]position:absolute;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]width:22px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]height:22px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]background-color:red;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]left:10px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]top:9px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]border-radius:50%;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]}[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p].progress{[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]width:432px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]height:10px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]position:absolute;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]background-color:rgba(255,255,255,0.4);[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]left:40px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]top:15px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]border-radius:4px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]overflow:hidden;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]}[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p].curr-progress{[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]width:0%;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]height:100%;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]background-color:#fff;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]}[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p].time{[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]width:120px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]height:20px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]text-align:center;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]line-height:20px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]font-size:12px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]color:#fff;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]position:absolute;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]left:510px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]top:10px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]}[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p].extend{[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]position:absolute;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]width:20px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]height:20px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]background-color:red;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]right:10px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]top:10px;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]}[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]style>[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]head>[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p][p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p][p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]视频案例figcaption>[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p][p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]video>[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p][p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]a>[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p][p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]div>[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]div>[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p][p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]00:00:00span>/[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]00:00:00span>[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]div>[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]a>[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]div>[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]div>[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]figure>[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p][p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]varvideo=document.querySelector('video');[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]varplayBtn=document.querySelector('.switch');[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]varcurrProgress=document.querySelector('.curr-progress');[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]varcurrTime=document.querySelector('.curr-time');[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]vartotalTime=document.querySelector('.total-time');[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]varextend=document.querySelector('.extend');[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]vartTime=0;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]playBtn.onclick=function(){[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]if(video.paused){//如果视频是暂停的[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]video.play();//play()播放load()重新加载pause()暂停[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]}else{[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]video.pause();[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]}[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]}[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]//当视频能播放(已经通过网络加载完成)时[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]video.oncanplay=function(){[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]tTime=video.duration;//获取视频总时长(单位秒)[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]vartTimeStr=getTimeStr(tTime);[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]totalTime.innerHTML=tTimeStr;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]}[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]//当视频当前播放时间更新的时候[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]video.ontimeupdate=function(){[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]varcTime=video.currentTime;//获取当前播放时间[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]varcTimeStr=getTimeStr(cTime);[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]console.log(cTimeStr);[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]currTime.innerHTML=cTimeStr;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]currProgress.style.width=cTime/tTime*100+"%";[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]}[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]extend.onclick=function(){[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]video.webkitRequestFullScreen();//视频全屏[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]}[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]//将以秒为单位的时间变成“00:00:00”格式的字符串[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]functiongetTimeStr(time){[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]varh=Math.floor(time/3600);[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]varm=Math.floor(time%3600/60);[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]vars=Math.floor(time%60);[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]h=h>=10?h:"0"+h;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]m=m>=10?m:"0"+m;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]s=s>=10?s:"0"+s;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]returnh+":"+m+":"+s;[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]}[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]script>[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]body>[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]html>[p=40, 0, left][font=arial, 微软雅黑, sans-serif,][size=3][color=#444][size=3]        [/size][/color][/size][/font][/p]

        

        


               
*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆

本版积分规则

关闭

每日头条

通过邮件订阅最新 Code4App 信息
上一条 /4 下一条

广告投放| 广东互联网违法和不良信息举报中心|中国互联网举报中心|Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表