【微信video视频播放】video标签

这篇文章可以帮助了解原理

<!DOCTYPE html>
<html lang="en">
<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"><link rel="stylesheet" href="index.css"><title>视屏播放</title><style>html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}/* 样式 */.video_wrap {position: relative;width: 100%;overflow: hidden;}#videoInfoId {}.video_wrap .poster {position: absolute;width: 100%;left: 0px;top: 0px;}.video-btn-wrap {position: absolute;right: 20px;bottom: 20px;z-index: 99;}.video-percentage-bar {position: absolute;width: 100%;height: 2px;background-color: #cfa948;left: 0;bottom: 0;}.hide {display: none;}.fixed-wrap{position: fixed;top: 0;left: 0;bottom: 0;right: 0;z-index: 9999;}.fixed-video-wrap{background-color: #191919;}</style>
</head>
<body><div class="video_wrap" ><?php if(stristr($_SERVER['HTTP_USER_AGENT'],'Android')) { ?><?php } else { ?><video playsinline webkit-playsinline id="videoInfoId"></video><?php } ?><img class="poster" src="img/thumb.jpg" alt=""><!-- 播放、暂停的按钮 --><div class="video-btn-wrap" id="videoRightBtn"><a id="playVideoBtn"><img class="video-btn" src="img/video-play.svg"></a><a id="stopVideoBtn" class="hide"><img class="video-btn" src="img/video-stop.svg"></a></div><!-- 进度条 --><div id="videoPercentageId" class="video-percentage-bar"></div></div><div class="fixed-wrap fixed-video-wrap hide" id="J_android_video_wrap"><video id="videoInfoId"></video></div>
</body>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){var windowW = headWidth = $(window).innerWidth(),videoW,videoH,videoShowW = 1,videoShowH = 1,videoMarginLeft = -1,videoMarginTop = -1,videoPercentage = 0;// 视频的信息  一般从后台获取赋值，这里是一个例子，值是定值var videoInfo = {width: '540',    //视频的宽度height: '303',   //视频的高度duration: '60000',  //视频的长度thumb: 'img/thumb.jpg',  //未播放时的图片video: 'video.mp4'   //视频的地址}//根据屏幕宽度给包裹视频的外标签赋值$('.video_wrap').css({'width': headWidth + 'px','height': headWidth + 'px'});// video上封面图计算高度$('.video_wrap .poster').css('height', headWidth + 'px');// 转成number类型的数字videoW = videoInfo.width - 0;videoH = videoInfo.height - 0;if (videoW > videoH) {  // 宽大于高，横向videoShowH = windowW;videoShowW = Math.round(videoW * videoShowH / videoH);} else {videoShowW = windowW;videoShowH = Math.round(videoH * videoShowW / videoW);}//居中videoMarginLeft = Math.round((windowW - videoShowW) / 2);videoMarginTop = Math.round((windowW - videoShowH) / 2);$('#videoInfoId').attr('src', videoInfo.video);var isAndroid = navigator.userAgent.match('Android');   //判断是否是安卓系统function playVideo() {  var tmpWindowW = $(window).width(),tmpWindowH = $(window).height();if(isAndroid){$('#J_android_video_wrap').show();$('#videoInfoId').attr('src', videoInfo.video);$('#videoInfoId').css({'width': tmpWindowW + 'px','height': tmpWindowH + 'px','margin-left': '0px','margin-top': '0px'});}else{$('#videoInfoId').css({'width': videoShowW + 'px','height': videoShowH + 'px','margin-left': videoMarginLeft + 'px','margin-top': videoMarginTop + 'px'});}$('.poster').addClass('hide');$('#playVideoBtn').addClass('hide');$('#stopVideoBtn').removeClass('hide');$('#videoInfoId').get(0).play();}function stopVideo() {  $('#J_android_video_wrap').hide();$('#videoInfoId').css({'width': '1px','height': '1px','margin-left': '-1px','margin-top': '-1px'});$('.poster').removeClass('hide');$('#playVideoBtn').removeClass('hide');$('#stopVideoBtn').addClass('hide');$('#videoInfoId').get(0).play();$('#videoInfoId').get(0).pause();}$('#videoInfoId').on('durationchange', function(data) {if (videoInfo.duration) {   // 后端duration单位为毫秒，currentTime和duration单位为秒videoPercentage = data.target.currentTime * 100000 / videoInfo.duration;$('#videoPercentageId').css('width', videoPercentage + '%');} else {videoPercentage = data.target.currentTime * 100 / data.target.duration;$('#videoPercentageId').css('width', videoPercentage + '%');}});// 当媒介长度改变时运行的脚本当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本$('#videoInfoId').on('timeupdate', function(data) {if (videoInfo.duration) {   // 后端duration单位为毫秒，currentTime和duration单位为秒videoPercentage = data.target.currentTime * 100000 / videoInfo.duration;$('#videoPercentageId').css('width', videoPercentage + '%');if (data.target.currentTime * 1000 >= videoInfo.duration) {stopVideo();data.target.currentTime = 0;}} else {videoPercentage = data.target.currentTime * 100 / data.target.duration;$('#videoPercentageId').css('width', videoPercentage + '%');}});//播放视频$('#playVideoBtn').click(function(){$('#videoPercentageId').removeClass('hide');playVideo();})//暂停视频$('#stopVideoBtn').click(function(){$('#videoPercentageId').addClass('hide');stopVideo();})//视屏播放结束$('#videoInfoId').on('ended', function() {stopVideo();});})
</script>
</html>

github地址： https://github.com/summerNa/videoDemo/tree/master/video

【微信video视频播放】video标签相关推荐

去除/屏蔽安卓/Android手机的 qq浏览器微信H5使用video标签播放视频，结束后的视频广告
今天是个好日子老干妈炖大鹅的好日子 X5内核是腾讯基于优秀开源Webkit深度"优化并加工"的浏览器渲染引擎微信和手机qq都是还有一些就不细说了 x5内核会监管vid ...
微信小程序 - 实现＜video＞视频组件自定义封面及播放按钮，给 video 视频播放组件加上封面图、封面标题、封面描述文字、自定义的播放按钮、DIY 封面等（详细示例源码）
前言网上的教程都太乱了,根本无法进行改造,本文做优质的教程. 本文实现了微信小程序项目中,给 <video> 视频播放组件增加自定义封面.播放按钮.描述等一切 DIY! 您直接一键复制 ...
微信小程序调用video视频播放没有声音的原因
微信小程序Video组件的声音是由muted控制,一般会写成 muted = "flase" ,或者直接muted,默认值不起作用,只能写成muted="{{flase} ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
html中video视频播放
1. --video-- video元素局部属性 autoplay,preload,controls,loop,poster,width,height,muted,src 1.1 preload预先 ...
vue引入video视频播放器（视频调用代码范例）
vue引入video视频播放器(视频调用代码范例) VUE视频调用代码范例1: <template><div><div id="player"> ...
video视频播放以及主流浏览器兼容
直接看代码吧! <!DOCTYPE html> <html><head><metacharset="utf-8" /><met ...
JS_画中画，video视频播放器
经常看视频的朋友可能会遇到视频"画中画"的效果,例如你在看优酷的电视剧,向下滚动看推荐视频或者评论等信息的时候,发现上面的播放视频被屏幕上滚之后遮盖了,右下方出现了一个小视频播放器 ...
video 在安卓版本上小窗口播放，IOS 微信 video小屏幕播放，微信全屏video
目录: 安卓和ios微信video小窗口播放(太水,可以直接跳过) noscript标签 video移动端上面不得不说的辛酸腾讯关于video的说明文档:https://x5.tencent.com ...
总结移动端video视频播放的坑
1.x5同层播放器移动端浏览器中的video元素是比较特别的,早期无论是在iOS还是Android的浏览器中,它都位于页面的最顶层,无法被遮盖.后来这个问题在iOS下得到了解决,但是Android的 ...

【微信video视频播放】video标签

【微信video视频播放】video标签相关推荐

最新文章

热门文章