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

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

演示实例

部分代码片段：

HTML部分：

mui.init();植发美发养发视频主页同城发现我的精彩评论X山村一枝花10月31日 9:20:238882欢迎来到美丽的大山世界太刺激了下次有时间还想再来欢迎来到美丽的大山世界太刺激了下次有时间还想再来欢迎来到美丽的大山世界太刺激了下次有时间还想再来欢迎来到美丽的大山世界太刺激了下次有时间还想再来496条回复>发送评论详情∨山村二枝花 楼主10月31日 9:20:238882欢迎来到美丽的大山世界太刺激了下次有时间还想再来欢迎来到美丽的大山世界太刺激了下次有时间还想再来欢迎来到美丽的大山世界太刺激了下次有时间还想再来欢迎来到美丽的大山世界太刺激了下次有时间还想再来山村二枝花 回复  @风吹枫又落10月31日 9:20:238882欢迎来到美丽的大山世界太刺激了下次有时间还想再来欢迎来到美丽的大山世界太刺激了发送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播放此视频@吃货世界欢迎来到美丽的大山世界太刺激了下次有时间还想来关注已关注666w666888`)$(".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) //切换结束时，告诉我现在是第几个slidevar 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****