仿抖音，快手播放效果网页版及列表播放

转载于video视频转成canvas（兼容至IE8+，全原生JS）

解决浏览器兼容性，QQ浏览器篡改video标签的方法之一.

源代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/><title>Document</title><style type="text/css">*{margin:0px;padding:0px;}body,html{height:100%;/*background-color:#000*/}li{list-style:none;}.page{width:100%;height:10%;/*background-color:#fdfdfd;*/}#aa,video{width:100%;height:100%;background:blue;margin: 0px auto;text-align: center;position: absolute;top: 0;z-index: -1;}#wrap{width:100%;height:100%;overflow:hidden}/*ul{transform: translateY(0)!important;}*/ul{touch-action: pan-y;/*启用单指垂直平移手势*/}#wrap2{width:100%;height:1000%;    }#video{/*display: none;*/}</style>
</head>
<body><div class="wrap" id="wrap"><ul class="wrap2" id="wrap2"><li class="page" value="/%E6%90%9E%E7%AC%91.mp4" title="进球瞬间">1</li><li class="page" value="/%E6%90%9E%E7%AC%91.mp4" title="胜利庆祝">2</li><li class="page" value="/IMG_8306.MP4" title="进球瞬间">3</li><li class="page" value="/%E6%90%9E%E7%AC%91.mp4" title="胜利庆祝">4</li><li class="page" value="/IMG_8306.MP4" title="进球瞬间">5</li><li class="page" value="/%E6%90%9E%E7%AC%91.mp4" title="胜利庆祝">6</li><li class="page">7</li></ul>
</div><div id="aa">              <video controls="controls" id="video" autoplay="autoplay" src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" poster="" height="500px" width="500px"  x5-playsinline="true" x5-video-player-type="h5-page" x-webkit-airplay="allow" x5-video-player-fullscreen="true" playsinline="true" webkit-playsinline="true" ></video><script src="./js/jquery.min.js"></script></div><!--<div id="dylist"><div class="play">播放</div><div class="pause">暂停</div><div class="playPause">播放或暂停视频</div><div class="change-src">切换视频</div></div>--><script type="text/javascript">
/** video视频转成canvas（兼容至IE8+）* Author: Zijor   Created On: 2017-06-25* *  使用方法：*      var videoCanvas = new VideoToCanvas(videoDom);**  对象的属性：*      暂无。**  对象的方法：*      play       播放视频*      pause      暂停视频*      playPause  播放或暂停视频*      change(src) 切换视频。参数src为切换的视频地址*///javascript加载属性：let sH = document.documentElement.scrollHeight || document.body.scrollHeight;var lis = document.getElementsByTagName("li");var wrap2 =document.getElementById("wrap2");var lis_n = "0";
$('.change-src').on(window.onload = function(){videoCanvas.change(lis[lis_n].getAttribute("value"));//加入视频地址});
/*   -------------------------------手势操作-------------------------------------   *///重要！禁止移动端滑动的默认事件document.body.addEventListener('touchmove', function(event) {event = event ? event : window.event;if(event.preventDefault) {event.preventDefault()} else {event.returnValue = false}}, false)var pages = function(obj) {var box = document.getElementById(obj.wrap);var box2 = document.getElementById(obj.wrap2);var len = obj.len;var n = obj.n;var startY, moveY, cliH;//获取屏幕高度var getH = function() {cliH = document.body.clientHeight};getH();window.addEventListener('resize', getH, false);//touchStartvar touchstart = function(event) {if(!event.touches.length) {return;}startY = event.touches[0].pageY;moveY = 0;};//touchMovevar touchmove = function(event) {if(!event.touches.length) {return;}moveY = event.touches[0].pageY - startY;box2.style.transform = 'translateY(' + (-n * cliH + moveY) + 'px)'; //根据手指的位置移动页面};//touchEndvar touchend = function(event) {//位移小于+-50的不翻页if (moveY < -50){videoCanvas.change(lis[n].getAttribute("value"));/*加入视频地址*/n++; }else if (moveY > 50){videoCanvas.change(lis[n].getAttribute("value"));/*加入视频地址*/n--; }else{//event.preventDefault();调试终止默认事件$('ul li').bind('click','.wrap2',function(){videoCanvas.playPause();})}// if() n++;// if() n--;//最后&最前页控制if(n < 0) n = 0;if(n > len - 1) n = len - 1;//重定位box2.style.transform = 'translateY(' + (-n * 10) + '%)'; //根据百分比位置移动页面//console.log(n)};//touch事件绑定box.addEventListener("touchstart", function(event) {//加载视频// console.log($('.wrap2').css('transform').replace(/[^0-9\-,]/g,'').split(','));//var page_n =$('.wrap2').css('transform').replace(/[^0-9\-,]/g,'').split(',')[5];//page_n=Math.abs(page_n)/sH;//console.log(page_n)touchstart(event)}, false);box.addEventListener("touchmove", function(event) {touchmove(event)}, false);box.addEventListener("touchend", function(event) {touchend(event)}, false);};pages({wrap: 'wrap', //.wrap的idwrap2: 'wrap2', //.wrap2的idlen: 6, //一共有几页n: 0 //页面一打开默认在第几页？第一页就是0，第二页就是1});
//视频控制参数
var VideoToCanvas = (function(window, document) {function VideoToCanvas(videoElement) {if(!videoElement) {return;}var canvas = document.createElement('canvas');canvas.width = videoElement.offsetWidth;canvas.height = videoElement.offsetHeight;ctx = canvas.getContext('2d');var newVideo = videoElement.cloneNode(false);var timer = null;var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;function drawCanvas() {ctx.drawImage(newVideo, 0, 0, canvas.width, canvas.height);timer = requestAnimationFrame(drawCanvas);}function stopDrawing() {cancelAnimationFrame(timer);}newVideo.addEventListener('play', function() {drawCanvas();},false);newVideo.addEventListener('pause', stopDrawing, false);newVideo.addEventListener('ended', stopDrawing, false);videoElement.parentNode.replaceChild(canvas, video);this.play = function() {newVideo.play();};this.pause = function() {newVideo.pause();};this.playPause = function() {if(newVideo.paused) {this.play();} else {this.pause();}};this.change = function(src) {if(!src) {return;}newVideo.src = src;};this.drawFrame = drawCanvas;}return VideoToCanvas;})(window, document); var video = document.getElementById('video');
var videoCanvas = new VideoToCanvas(video);$('.play').on('click',function(){videoCanvas.play();
});
$('.pause').on('click',function(){videoCanvas.pause();
})
$('.playPause').on('click',function(){videoCanvas.playPause();
})
// $('ul li').bind('click',function(){
//     videoCanvas.playPause();
//          //console.log($(this))
// })
$('.change-src').on('click',function(){videoCanvas.change('/IMG_8306.MP4');})
</script>
</body>
</html>

初始视频怎么解决？其实很简单，加入视频地址在load事件中。

videoCanvas.change(lis[0].getAttribute("value"));//加载视频

源代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/><title>Document</title><style type="text/css">*{margin:0px;padding:0px;}body,html{height:100%;/*background-color:#000*/}li{list-style:none;}.page{width:100%;height:10%;/*background-color:#fdfdfd;*/}#aa,video{width:100%;height:100%;background:blue;margin: 0px auto;text-align: center;position: absolute;top: 0;z-index: -1;}#wrap{width:100%;height:100%;overflow:hidden}/*ul{transform: translateY(0)!important;}*/ul{touch-action: pan-y;/*启用单指垂直平移手势*/}#wrap2{width:100%;height:1000%;    }#video{/*display: none;*/}</style>
</head>
<body><div class="wrap" id="wrap"><ul class="wrap2" id="wrap2"><li class="page" value="/%E6%90%9E%E7%AC%91.mp4" title="进球瞬间">1</li><li class="page" value="/%E6%90%9E%E7%AC%91.mp4" title="胜利庆祝">2</li><li class="page" value="/IMG_8306.MP4" title="进球瞬间">3</li><li class="page" value="/%E6%90%9E%E7%AC%91.mp4" title="胜利庆祝">4</li><li class="page" value="/IMG_8306.MP4" title="进球瞬间">5</li><li class="page" value="/%E6%90%9E%E7%AC%91.mp4" title="胜利庆祝">6</li><li class="page">7</li></ul>
</div><div id="aa">              <video controls="controls" id="video" autoplay="autoplay" src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" poster="" height="500px" width="500px"  x5-playsinline="true" x5-video-player-type="h5-page" x-webkit-airplay="allow" x5-video-player-fullscreen="true" playsinline="true" webkit-playsinline="true" ></video><script src="./js/jquery.min.js"></script></div><!--<div id="dylist"><div class="play">播放</div><div class="pause">暂停</div><div class="playPause">播放或暂停视频</div><div class="change-src">切换视频</div></div>--><script type="text/javascript">
/** video视频转成canvas（兼容至IE8+）* Author: Zijor   Created On: 2017-06-25* *  使用方法：*      var videoCanvas = new VideoToCanvas(videoDom);**  对象的属性：*      暂无。**  对象的方法：*      play       播放视频*      pause      暂停视频*      playPause  播放或暂停视频*      change(src) 切换视频。参数src为切换的视频地址*///javascript加载属性：let sH = document.documentElement.scrollHeight || document.body.scrollHeight;var lis = document.getElementsByTagName("li");var wrap2 =document.getElementById("wrap2");var lis_n = "0";
$('.change-src').on(window.onload = function(){videoCanvas.change(lis[lis_n].getAttribute("value"));//加入视频地址});
/*   -------------------------------手势操作-------------------------------------   *///重要！禁止移动端滑动的默认事件document.body.addEventListener('touchmove', function(event) {event = event ? event : window.event;if(event.preventDefault) {event.preventDefault()} else {event.returnValue = false}}, false)var pages = function(obj) {var box = document.getElementById(obj.wrap);var box2 = document.getElementById(obj.wrap2);var len = obj.len;var n = obj.n;var startY, moveY, cliH;//获取屏幕高度var getH = function() {cliH = document.body.clientHeight};getH();window.addEventListener('resize', getH, false);//touchStartvar touchstart = function(event) {if(!event.touches.length) {return;}startY = event.touches[0].pageY;moveY = 0;};//touchMovevar touchmove = function(event) {if(!event.touches.length) {return;}moveY = event.touches[0].pageY - startY;box2.style.transform = 'translateY(' + (-n * cliH + moveY) + 'px)'; //根据手指的位置移动页面};//touchEndvar touchend = function(event) {//位移小于+-50的不翻页if (moveY < -50){videoCanvas.change(lis[n].getAttribute("value"));/*加入视频地址*/n++; }else if (moveY > 50){videoCanvas.change(lis[n].getAttribute("value"));/*加入视频地址*/n--; }else{//event.preventDefault();调试终止默认事件$('ul li').bind('click','.wrap2',function(){videoCanvas.playPause();})}// if() n++;// if() n--;//最后&最前页控制if(n < 0) n = 0;if(n > len - 1) n = len - 1;//重定位box2.style.transform = 'translateY(' + (-n * 10) + '%)'; //根据百分比位置移动页面//console.log(n)};//touch事件绑定box.addEventListener("touchstart", function(event) {//加载视频// console.log($('.wrap2').css('transform').replace(/[^0-9\-,]/g,'').split(','));//var page_n =$('.wrap2').css('transform').replace(/[^0-9\-,]/g,'').split(',')[5];//page_n=Math.abs(page_n)/sH;//console.log(page_n)touchstart(event)}, false);box.addEventListener("touchmove", function(event) {touchmove(event)}, false);box.addEventListener("touchend", function(event) {touchend(event)}, false);};pages({wrap: 'wrap', //.wrap的idwrap2: 'wrap2', //.wrap2的idlen: 6, //一共有几页n: 0 //页面一打开默认在第几页？第一页就是0，第二页就是1});
//视频控制参数
var VideoToCanvas = (function(window, document) {function VideoToCanvas(videoElement) {if(!videoElement) {return;}var canvas = document.createElement('canvas');canvas.width = videoElement.offsetWidth;canvas.height = videoElement.offsetHeight;ctx = canvas.getContext('2d');var newVideo = videoElement.cloneNode(false);var timer = null;var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;function drawCanvas() {ctx.drawImage(newVideo, 0, 0, canvas.width, canvas.height);timer = requestAnimationFrame(drawCanvas);}function stopDrawing() {cancelAnimationFrame(timer);}newVideo.addEventListener('play', function() {drawCanvas();},false);newVideo.addEventListener('pause', stopDrawing, false);newVideo.addEventListener('ended', stopDrawing, false);videoElement.parentNode.replaceChild(canvas, video);this.play = function() {newVideo.play();};this.pause = function() {newVideo.pause();};this.playPause = function() {if(newVideo.paused) {this.play();} else {this.pause();}};this.change = function(src) {if(!src) {return;}newVideo.src = src;};this.drawFrame = drawCanvas;}return VideoToCanvas;})(window, document); var video = document.getElementById('video');
var videoCanvas = new VideoToCanvas(video);$('.play').on('click',function(){videoCanvas.play();
});
$('.pause').on('click',function(){videoCanvas.pause();
})
$('.playPause').on('click',function(){videoCanvas.playPause();
})
// $('ul li').bind('click',function(){
//     videoCanvas.playPause();
//          //console.log($(this))
// })
$('.change-src').on('click',function(){videoCanvas.change('/IMG_8306.MP4');})
</script>
</body>
</html>

转与网络，用于网络，希望能够帮助大家，共同进步。

仿抖音，快手播放效果网页版及列表播放相关推荐

html5仿抖音切换效果,仿抖音视频滑动效果
更新记录 1.6.2(2020-06-04) 优化css3动画效果 1.6.1(2020-05-23) 1.修复串音 2.新增进度条 3.新增弹幕查看更多 scroll-video uniapp仿抖 ...
Android仿抖音双击点赞动画,Android仿抖音点击效果
原标题:Android仿抖音点击效果作者丨wish_xy https://www.jianshu.com/p/1d17c38a3db1 学习自定义view,想找点东西耍一下,刚好看到抖音的点赞效果不 ...
仿抖音短视频源码，高仿抖音双击点赞效果之双击的问题
仿抖音短视频源码中,实现仿抖音的双击点赞效果,相关代码如下: public class MyView extends View {private GestureDetector gestureDete ...
微信小程序短剧开发技术踩坑指南仿抖音快手小视频
1.Video组件微信官方文档地址: https://developers.weixin.qq.com/miniprogram/dev/component/video.html uniapp官方文档 ...
仿抖音底部导航效果（二）
继续实现仿抖音底部导航今天要实现效果如下图首先在原基础的布局中加入一个ImageView <LinearLayoutandroid:layout_width="wrap_conte ...
仿抖音底部导航效果（一）
最终效果预览最终效果这次实现的是第一步效果本次效果 <h3 style="color:blue">原理解析:通过对控件添加动画来实现仿抖音底部导航的效果</ ...
Android 利用ConstraintLayout 实现仿抖音点赞动画效果
正好在做一个和抖音差不多的APP,目前在刚启动阶段,先从实现一个抖音的点赞动画开始...爱心是从阿里的矢量图标库下载的一个爱心的Png图片,不是使用贝塞尔曲线画的...原因是我不会贝塞尔曲线(其实就是 ...
仿抖音评论底部弹出框（列表框+发表框）
BottomSheetDialogFragment高仿抖音评论底部弹出框先看效果图: 这个弹窗的效果是使用BottomSheetDialogFragment做的,第一个弹出的对话框为CommentL ...
Android 高仿抖音双击点赞效果
最近遇到一个需求模仿抖音点赞效果废话不多说,直接上代码自定义一个view 在布局中引用它就可以 public class Love extends RelativeLayout { pr ...

仿抖音，快手播放效果网页版及列表播放

仿抖音，快手播放效果网页版及列表播放相关推荐

最新文章

热门文章