sumerui - jQuery仿抖音视频网页源码【纯前端HTML5 + JS + CSS】

sumerui - jQuery仿抖音视频网页源码【纯前端HTML5 + JS + CSS】

演示实例

部分代码片段：

HTML部分：

	
	
	
	
	
	
	
	
	
	
	
	
		mui.init();
	


	

		
		

			

				
植发
				
美发
				
养发
				
视频
			
		
		

			

				
			
		
		
		
		

			

				

					主页
				
				

					同城
				
				

					
				

					发现
				
				

					我的
				
			
		
		
		

			

				

					

						精彩评论
					
					

						X
					
				
				

					

						

							

								
							

								
山村一枝花
								
10月31日 9:20:23
							
							

								
8882
								
						
						

							欢迎来到美丽的大山世界太刺激了下次有时间还想再来欢迎来到美丽的大山世界太刺激了下次有时间还想再来欢迎来到美丽的大山世界太刺激了
							下次有时间还想再来欢迎来到美丽的大山世界太刺激了下次有时间还想再来
						
						

							496条回复>
						
					
				
				

					
					
发送
					
			
		
		
		

			

				

					

						评论详情
					
					

						∨
					
				
				
				

					

						

							

								
							

								
山村二枝花 楼主
								
10月31日 9:20:23
							
							

								
8882
								
						
						

							欢迎来到美丽的大山世界太刺激了下次有时间还想再来欢迎来到美丽的大山世界太刺激了下次有时间还想再来欢迎来到美丽的大山世界太刺激了
							下次有时间还想再来欢迎来到美丽的大山世界太刺激了下次有时间还想再来
						
					
				
				
				

					

						

							

								
							

								
山村二枝花 回复  @风吹枫又落
								
10月31日 9:20:23
							
							

								
8882
								
						
						

							欢迎来到美丽的大山世界太刺激了下次有时间还想再来欢迎来到美丽的大山世界太刺激了
						
					
				
				

					

						
						
发送
						
				
			
		
	
	
		window.onload = function () {
			$.ajax({
				type: "GET",
				url: "#",
				contentType: 'application/json',
				data: {
					page: 1,
					type: 1
				},
				dataType: "jsonp",
				success: function (res) {
					console.log(res.data)
				},
				error: function (xhr) {
					console.log(xhr);
				}
			});
			var arr = [{
					title: "温州威客网络科技有限公司",
					msg: true,
					state: 'pause',
					src: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_TheatricalTeaser_WeAreOverwatch_zhCN.mp4',
					videoImg: ''
				},
			];
			// console.log(arr);
			//循环后台的数据拼接上去
			$.each(arr, function (i, item) {
				console.log(item.src);
				var lihtml = $(
					`

				你的浏览器不支持HTML5播放此视频
				
@吃货世界
						
欢迎来到美丽的大山世界太刺激了下次有时间还想来
				
					

						

							
关注
							
已关注
							
666w
						
						

							

							
666
						
						

							
888
						
						

							
					
					
`
				)
				$(".swiper-wrapper").append(lihtml);
		
			})
			var mySwiper = new Swiper('.swiper-container', {
					direction: 'vertical', // 垂直切换选项
					on: {
						slideChangeTransitionEnd: function () {
							$(".remarkWrap").slideUp(100);
							$(".twoRemarkWrap").slideUp(100);
							console.log(this.activeIndex) //切换结束时，告诉我现在是第几个slide
							var videoLength = $(".swiper-container .swiper-slide").length;
							console.log(videoLength);
							//先显示 (这一部分是不能实现进去就播放因为没有进行过交互动作所以先在加载的时候全部先暂停并时间重置为0，用户点击的时候再播放)
							// for (var i = 1; i  
jascript部分
 
/*! npm.im/iphone-inline-video 2.2.2 */
var enableInlineVideo = function () {
    "use strict"; /*! npm.im/intervalometer */
    function e(e, i, n, r) {
        function t(n) {
            d = i(t, r), e(n - (a || n)), a = n
        }
        var d, a;
        return {
            start: function () {
                d || t(0)
            },
            stop: function () {
                n(d), d = null, a = 0
            }
        }
    }
    function i(i) {
        return e(i, requestAnimationFrame, cancelAnimationFrame)
    }
    function n(e, i, n) {
        function r(r) {
            n && !n(e, i) || r.stopImmediatePropagation()
        }
        return e.addEventListener(i, r), r
    }
    function r(e, i, n, r) {
        function t() {
            return n[i]
        }
        function d(e) {
            n[i] = e
        }
        r && d(e[i]), Object.defineProperty(e, i, {
            get: t,
            set: d
        })
    }
    function t(e, i, n) {
        n.addEventListener(i, function () {
            return e.dispatchEvent(new Event(i))
        })
    }
    function d(e, i) {
        Promise.resolve().then(function () {
            e.dispatchEvent(new Event(i))
        })
    }
    function a(e) {
        var i = new Audio;
        return t(e, "play", i), t(e, "playing", i), t(e, "pause", i), i.crossOrigin = e.crossOrigin, i.src = e.src || e.currentSrc || "data:", i
    }
    function u(e, i, n) {
        (m || 0) + 200 = e.video.duration
    }
    function s(e) {
        var i = this;
        i.video.readyState >= i.video.HAVE_FUTURE_DATA ? (i.hasAudio || (i.driver.currentTime = i.video.currentTime + e * i.video.playbackRate / 1e3, i.video.loop && o(i) && (i.driver.currentTime = 0)), u(i.video, i.driver.currentTime)) : i.video.networkState === i.video.NETWORK_IDLE && 0 === i.video.buffered.length && i.video.load(), i.video.ended && (delete i.video[h], i.video.pause(!0))
    }
    function c() {
        var e = this,
            i = e[g];
        if (e.webkitDisplayingFullscreen) return void e[E]();
        "data:" !== i.driver.src && i.driver.src !== e.src && (u(e, 0, !0), i.driver.src = e.src), e.paused && (i.paused = !1, 0 === e.buffered.length && e.load(), i.driver.play(), i.updater.start(), i.hasAudio || (d(e, "play"), i.video.readyState >= i.video.HAVE_ENOUGH_DATA && d(e, "playing")))
    }
    function v(e) {
        var i = this,
            n = i[g];
        n.driver.pause(), n.updater.stop(), i.webkitDisplayingFullscreen && i[w](), n.paused && !e || (n.paused = !0, n.hasAudio || d(i, "pause"), i.ended && !i.webkitDisplayingFullscreen && (i[h] = !0, d(i, "ended")))
    }
    function p(e, n) {
        var r = {};
        e[g] = r, r.paused = !0, r.hasAudio = n, r.video = e, r.updater = i(s.bind(r)), n ? r.driver = a(e) : (e.addEventListener("canplay", function () {
            e.paused || d(e, "playing")
        }), r.driver = {
            src: e.src || e.currentSrc || "data:",
            muted: !0,
            paused: !0,
            pause: function () {
                r.driver.paused = !0
            },
            play: function () {
                r.driver.paused = !1, o(r) && u(e, 0)
            },
            get ended() {
                return o(r)
            }
        }), e.addEventListener("emptied", function () {
            var i = !r.driver.src || "data:" === r.driver.src;
            r.driver.src && r.driver.src !== e.src && (u(e, 0, !0), r.driver.src = e.src, i || !n && e.autoplay ? r.driver.play() : r.updater.stop())
        }, !1), e.addEventListener("webkitbeginfullscreen", function () {
            e.paused ? n && 0 === r.driver.buffered.length && r.driver.load() : (e.pause(), e[E]())
        }), n && (e.addEventListener("webkitendfullscreen", function () {
            r.driver.currentTime = e.currentTime
        }), e.addEventListener("seeking", function () {
            k.indexOf(100 * e.currentTime | 0)  
源码地址：点击下载
 
*****SUMER UI3.0****