{"id":415,"date":"2016-12-14T13:59:30","date_gmt":"2016-12-14T05:59:30","guid":{"rendered":"http:\/\/loveuhouse.cn\/wordpress\/?p=415"},"modified":"2016-12-14T13:59:30","modified_gmt":"2016-12-14T05:59:30","slug":"h5-video-%e8%87%aa%e5%ae%9a%e4%b9%89%e6%92%ad%e6%94%be%e8%bf%9b%e5%ba%a6%e6%9d%a1","status":"publish","type":"post","link":"https:\/\/loveuhouse.cn\/wordpress\/?p=415","title":{"rendered":"h5 video \u81ea\u5b9a\u4e49\u64ad\u653e\u8fdb\u5ea6\u6761"},"content":{"rendered":"<p>\u6765\u6e90\uff1a<a href=\"http:\/\/www.cnblogs.com\/moqiutao\/\">http:\/\/www.cnblogs.com\/moqiutao\/-\u98ce\u96e8\u540e\u89c1\u5f69\u8679<\/a><\/p>\n<pre class=\"lang:js decode:true\">\/\/ \u4e3a\u4e86\u4e0d\u968f\u610f\u7684\u521b\u5efa\u5168\u5c40\u53d8\u91cf\uff0c\u6211\u4eec\u5c06\u6211\u4eec\u7684\u4ee3\u7801\u653e\u5728\u4e00\u4e2a\u81ea\u5df1\u8c03\u7528\u81ea\u5df1\u7684\u533f\u540d\u51fd\u6570\u4e2d\uff0c\u8fd9\u662f\u4e00\u4e2a\u597d\u7684\u7f16\u7a0b\u4e60\u60ef\n        (function(window, document){\n            \/\/ \u83b7\u53d6\u8981\u64cd\u4f5c\u7684\u5143\u7d20\n            var video = document.getElementById(\"video\");\n            var videoControls = document.getElementById(\"videoControls\");\n            var videoContainer = document.getElementById(\"videoContainer\");\n            var controls = document.getElementById(\"video_controls\");\n            var playBtn = document.getElementById(\"playBtn\");\n            var fullScreenBtn = document.getElementById(\"fullScreenBtn\");\n            var progressWrap = document.getElementById(\"progressWrap\");\n            var playProgress = document.getElementById(\"playProgress\");\n            var fullScreenFlag = false;\n            var progressFlag;\n\n            \/\/ \u521b\u5efa\u6211\u4eec\u7684\u64cd\u4f5c\u5bf9\u8c61\uff0c\u6211\u4eec\u7684\u6240\u6709\u64cd\u4f5c\u90fd\u5728\u8fd9\u4e2a\u5bf9\u8c61\u4e0a\u3002\n            var videoPlayer = {\n                init: function(){\n                    var that = this;\n                    video.removeAttribute(\"controls\");\n                    bindEvent(video, \"loadeddata\", videoPlayer.initControls);\n                    videoPlayer.operateControls();\n                },\n                initControls: function(){\n                    videoPlayer.showHideControls();\n                },\n                showHideControls: function(){\n                    bindEvent(video, \"mouseover\", showControls);\n                    bindEvent(videoControls, \"mouseover\", showControls);\n                    bindEvent(video, \"mouseout\", hideControls);\n                    bindEvent(videoControls, \"mouseout\", hideControls);\n                },\n                operateControls: function(){\n                    bindEvent(playBtn, \"click\", play);\n                    bindEvent(video, \"click\", play);\n                    bindEvent(fullScreenBtn, \"click\", fullScreen);\n                    bindEvent(progressWrap, \"mousedown\", videoSeek);\n                }\n            }\n\n            videoPlayer.init();\n\n            \/\/ \u539f\u751f\u7684JavaScript\u4e8b\u4ef6\u7ed1\u5b9a\u51fd\u6570\n            function bindEvent(ele, eventName, func){\n                if(window.addEventListener){\n                    ele.addEventListener(eventName, func);\n                }\n                else{\n                    ele.attachEvent('on' + eventName, func);\n                }\n            }\n            \/\/ \u663e\u793avideo\u7684\u63a7\u5236\u9762\u677f\n            function showControls(){\n                videoControls.style.opacity = 1;\n            }\n            \/\/ \u9690\u85cfvideo\u7684\u63a7\u5236\u9762\u677f\n            function hideControls(){\n                \/\/ \u4e3a\u4e86\u8ba9\u63a7\u5236\u9762\u677f\u4e00\u76f4\u51fa\u73b0\uff0c\u6211\u628avideoControls.style.opacity\u7684\u503c\u6539\u4e3a1\n                videoControls.style.opacity = 1;\n            }\n            \/\/ \u63a7\u5236video\u7684\u64ad\u653e\n            function play(){\n                if ( video.paused || video.ended ){              \n                    if ( video.ended ){ \n                        video.currentTime = 0;\n                        } \n                    video.play();\n                    playBtn.innerHTML = \"\u6682\u505c\"; \n                    progressFlag = setInterval(getProgress, 60);\n                } \n                else{ \n                    video.pause(); \n                    playBtn.innerHTML = \"\u64ad\u653e\";\n                    clearInterval(progressFlag);\n                } \n            }\n            \/\/ \u63a7\u5236video\u662f\u5426\u5168\u5c4f\uff0c\u989d\u8fd9\u4e00\u90e8\u5206\u6ca1\u6709\u5b9e\u73b0\u597d\uff0c\u4ee5\u540e\u6709\u7a7a\u6211\u4f1a\u63a5\u7740\u7814\u7a76\u4e00\u4e0b\n            function fullScreen(){\n                if(fullScreenFlag){\n                    videoContainer.webkitCancelFullScreen();\n                }\n                else{\n                    videoContainer.webkitRequestFullscreen();\n                }\n            }\n            \/\/ video\u7684\u64ad\u653e\u6761\n            function getProgress(){\n                var percent = video.currentTime \/ video.duration;\n                playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + \"px\";\n                showProgress.innerHTML = (percent * 100).toFixed(1) + \"%\";\n            }\n            \/\/ \u9f20\u6807\u5728\u64ad\u653e\u6761\u4e0a\u70b9\u51fb\u65f6\u8fdb\u884c\u6355\u83b7\u5e76\u8fdb\u884c\u5904\u7406\n            function videoSeek(e){\n                if(video.paused || video.ended){\n                    play();\n                    enhanceVideoSeek(e);\n                }\n                else{\n                    enhanceVideoSeek(e);\n                }\n\n            }\n            function enhanceVideoSeek(e){\n                clearInterval(progressFlag);\n                var length = e.pageX - progressWrap.offsetLeft;\n                var percent = length \/ progressWrap.offsetWidth;\n                playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + \"px\";\n                video.currentTime = percent * video.duration;\n                progressFlag = setInterval(getProgress, 60);\n            }\n\n        }(this, document))<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6765\u6e90\uff1ahttp:\/\/www.cnblogs.com\/moqiutao\/-\u98ce\u96e8\u540e\u89c1\u5f69\u8679 \/\/ \u4e3a\u4e86\u4e0d\u968f\u610f\u7684\u521b\u5efa\u5168 &hellip; <a href=\"https:\/\/loveuhouse.cn\/wordpress\/?p=415\" class=\"more-link\">\u7ee7\u7eed\u9605\u8bfb<span class=\"screen-reader-text\">h5 video \u81ea\u5b9a\u4e49\u64ad\u653e\u8fdb\u5ea6\u6761<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,2],"tags":[],"_links":{"self":[{"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/415"}],"collection":[{"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=415"}],"version-history":[{"count":1,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/415\/revisions"}],"predecessor-version":[{"id":416,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/415\/revisions\/416"}],"wp:attachment":[{"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/loveuhouse.cn\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}