string(14) "127.0.0.1:9200"
URL: http://127.0.0.1:9200/likecs_art_db/_search<br>REQUEST:<pre>Array
(
    [query] => Array
        (
            [match] => Array
                (
                    [text] => Array
                        (
                            [query] => 大事记 - 安卓微信浏览器 video 标签层级过高
                        )

                )

        )

    [highlight] => Array
        (
            [fields] => Array
                (
                    [text] => stdClass Object
                        (
                        )

                )

            [pre_tags] => #em#
            [post_tags] => #/em#
        )

    [size] => 8
    [from] => 0
)
</pre>RESPONSE:<pre>string(8251) "{"took":56,"timed_out":false,"_shards":{"total":1,"successful":1,"skipped":0,"failed":0},"hits":{"total":{"value":10000,"relation":"gte"},"max_score":64.38368,"hits":[{"_index":"likecs_art_db","_type":"_doc","_id":"48432","_score":64.38368,"_source":{"id":"48432","text":"\u5927\u4e8b\u8bb0 - \u5b89\u5353\u5fae\u4fe1\u6d4f\u89c8\u5668 video \u6807\u7b7e\u5c42\u7ea7\u8fc7\u9ad8","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"wisewrong","tagsname":"javascript|vue|\u79fb\u52a8\u7aef|less|\u5fae\u4fe1|video","tagsid":"[\"169\",\"236\",\"445\",\"1845\",\"608\",\"1035\"]","catesname":"\u5de5\u4f5c\u7b14\u8bb0","catesid":"[\"2564\"]","createtime":"1547628875"},"highlight":{"text":["#em#大#/em##em#事#/em##em#记#/em# - #em#安#/em##em#卓#/em##em#微#/em##em#信#/em##em#浏#/em##em#览#/em##em#器#/em# #em#video#/em# #em#标#/em##em#签#/em##em#层#/em##em#级#/em##em#过#/em##em#高#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"232925","_score":32.737755,"_source":{"id":"232925","text":"video \u6807\u7b7e\u5728\u5fae\u4fe1\u6d4f\u89c8\u5668\u7684\u95ee\u9898\u89e3\u51b3\u65b9\u6cd5","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"baiyygynui","tagsname":"","tagsid":"","catesname":null,"catesid":"","createtime":"1638946171"},"highlight":{"text":["#em#video#/em# #em#标#/em##em#签#/em#在#em#微#/em##em#信#/em##em#浏#/em##em#览#/em##em#器#/em#的问题解决方法"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"1023852","_score":31.803112,"_source":{"id":"1023852","text":"Html5 video\u6807\u7b7e\u5728\u5fae\u4fe1\u5185\u7f6e\u6d4f\u89c8\u5668\u4e0a\u65e0\u6cd5\u64ad\u653e","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"devcjq","tagsname":"","tagsid":"","catesname":null,"catesid":"","createtime":"1641525659"},"highlight":{"text":["Html5 #em#video#/em##em#标#/em##em#签#/em#在#em#微#/em##em#信#/em#内置#em#浏#/em##em#览#/em##em#器#/em#上无法播放"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"153499","_score":30.7909,"_source":{"id":"153499","text":"HTML 5 video \u6807\u7b7e\u8de8\u6d4f\u89c8\u5668\u517c\u5bb9","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"baiyygynui","tagsname":null,"tagsid":"","catesname":null,"catesid":"","createtime":"1637092274"},"highlight":{"text":["HTML 5 #em#video#/em# #em#标#/em##em#签#/em#跨#em#浏#/em##em#览#/em##em#器#/em#兼容"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"31091","_score":28.866613,"_source":{"id":"31091","text":"\u5fae\u4fe1\u5c0f\u7a0b\u5e8fvideo\u9ad8\u5c42\u7ea7\u7684\u89e3\u51b3","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"duxingdexin","tagsname":"","tagsid":"[]","catesname":"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f","catesid":"[\"302\"]","createtime":"1536050155"},"highlight":{"text":["#em#微#/em##em#信#/em#小程序#em#video#/em##em#高#/em##em#层#/em##em#级#/em#的解决"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"680929","_score":28.765247,"_source":{"id":"680929","text":"\u5b89\u5353\u5fae\u4fe1 \u6e05\u9664\u5fae\u4fe1\u6d4f\u89c8\u5668\u5185\u7f6e\u7f13\u5b58","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"lvfish","tagsname":"","tagsid":"","catesname":null,"catesid":"","createtime":"1639091507"},"highlight":{"text":["#em#安#/em##em#卓#/em##em#微#/em##em#信#/em# 清除#em#微#/em##em#信#/em##em#浏#/em##em#览#/em##em#器#/em#内置缓存"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"471112","_score":27.906702,"_source":{"id":"471112","text":"\u8ba9\u6240\u6709\u6d4f\u89c8\u5668\u652f\u6301HTML5 video\u89c6\u9891\u6807\u7b7e","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"devcjq","tagsname":"","tagsid":"","catesname":null,"catesid":"","createtime":"1635514353"},"highlight":{"text":["让所有#em#浏#/em##em#览#/em##em#器#/em#支持HTML5 #em#video#/em#视频#em#标#/em##em#签#/em#"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"298357","_score":27.719734,"_source":{"id":"298357","text":"\u5fae\u4fe1\u5185\u7f6e\u6d4f\u89c8\u5668\u5b57\u4f53\u7f29\u653e\uff08\u5b89\u5353\uff09","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"yuan619821","tagsname":"","tagsid":"","catesname":"","catesid":"","createtime":"1631081007"},"highlight":{"text":["#em#微#/em##em#信#/em#内置#em#浏#/em##em#览#/em##em#器#/em#字体缩放（#em#安#/em##em#卓#/em#）"]}}]}}"
</pre>string(14) "127.0.0.1:9200"
URL: http://127.0.0.1:9200/likecs_art_db/_search<br>REQUEST:<pre>Array
(
    [query] => Array
        (
            [match] => Array
                (
                    [text] => Array
                        (
                            [query] => 大事记 - 安卓微信浏览器 video 标签层级过高
                        )

                )

        )

    [highlight] => Array
        (
            [fields] => Array
                (
                    [text] => stdClass Object
                        (
                        )

                )

            [pre_tags] => #em#
            [post_tags] => #/em#
        )

    [size] => 8
    [from] => 8
)
</pre>RESPONSE:<pre>string(7967) "{"took":59,"timed_out":false,"_shards":{"total":1,"successful":1,"skipped":0,"failed":0},"hits":{"total":{"value":10000,"relation":"gte"},"max_score":64.38368,"hits":[{"_index":"likecs_art_db","_type":"_doc","_id":"509801","_score":27.574776,"_source":{"id":"509801","text":"\u5fae\u4fe1\u6d4f\u89c8\u5668video\u64ad\u653e\u89c6\u9891\u8e29\u5751","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"-867259206","tagsname":null,"tagsid":"","catesname":null,"catesid":"","createtime":"1636339447"},"highlight":{"text":["#em#微#/em##em#信#/em##em#浏#/em##em#览#/em##em#器#/em##em#video#/em#播放视频踩坑"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"541471","_score":27.13391,"_source":{"id":"541471","text":"video\u6807\u7b7eposter\u5c5e\u6027\u5728\u5b89\u5353\u5fae\u4fe1\u4e2d\u4e0d\u751f\u6548\u95ee\u9898\u89e3\u51b3","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"shichangchun","tagsname":null,"tagsid":"","catesname":null,"catesid":"","createtime":"1634674377"},"highlight":{"text":["#em#video#/em##em#标#/em##em#签#/em#poster属性在#em#安#/em##em#卓#/em##em#微#/em##em#信#/em#中不生效问题解决"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"536207","_score":26.686047,"_source":{"id":"536207","text":"\u89e3\u51b3\u5fae\u4fe1\u6d4f\u89c8\u5668\u5185video\u5168\u5c4f\u95ee\u9898","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"phpjinggege","tagsname":null,"tagsid":"","catesname":null,"catesid":"","createtime":"1634650385"},"highlight":{"text":["解决#em#微#/em##em#信#/em##em#浏#/em##em#览#/em##em#器#/em#内#em#video#/em#全屏问题"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"976066","_score":26.686047,"_source":{"id":"976066","text":"\u89e3\u51b3\u5fae\u4fe1\u6d4f\u89c8\u5668video\u5168\u5c4f\u7684\u95ee\u9898","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"youzhuxiaoyao","tagsname":"","tagsid":"","catesname":"","catesid":"","createtime":"1639868955"},"highlight":{"text":["解决#em#微#/em##em#信#/em##em#浏#/em##em#览#/em##em#器#/em##em#video#/em#全屏的问题"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"1014773","_score":26.686047,"_source":{"id":"1014773","text":"\u89e3\u51b3\u5fae\u4fe1\u6d4f\u89c8\u5668\u5185video\u5168\u5c4f\u95ee\u9898","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"phpjinggege","tagsname":null,"tagsid":"","catesname":null,"catesid":"","createtime":"1641009121"},"highlight":{"text":["解决#em#微#/em##em#信#/em##em#浏#/em##em#览#/em##em#器#/em#内#em#video#/em#全屏问题"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"968601","_score":26.266443,"_source":{"id":"968601","text":"html5 video\u6807\u7b7e\u5728\u4f4e\u7248\u672cie\u6d4f\u89c8\u5668\u4e0b\u600e\u4e48\u529e\uff1f","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"hong-yang","tagsname":"","tagsid":"","catesname":null,"catesid":"","createtime":"1639829897"},"highlight":{"text":["html5 #em#video#/em##em#标#/em##em#签#/em#在低版本ie#em#浏#/em##em#览#/em##em#器#/em#下怎么办？"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"203329671","_score":26.266443,"_source":{"id":"203329671","text":"html5 video\u6807\u7b7e\u5728\u4f4e\u7248\u672cie\u6d4f\u89c8\u5668\u4e0b\u600e\u4e48\u529e\uff1f","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"","tagsname":null,"tagsid":"","catesname":null,"catesid":"","createtime":"1638928200"},"highlight":{"text":["html5 #em#video#/em##em#标#/em##em#签#/em#在低版本ie#em#浏#/em##em#览#/em##em#器#/em#下怎么办？"]}},{"_index":"likecs_art_db","_type":"_doc","_id":"203520136","_score":26.266443,"_source":{"id":"203520136","text":"chrome\u6d4f\u89c8\u5668\u4e0d\u652f\u6301video\u6807\u7b7e\uff0c\u4e0d\u80fd\u81ea\u52a8\u64ad\u653e\u3002","intro":"\u76ee\u5f55\n\nECharts\n\u5f02\u6b65\u52a0\u8f7d\n\n\n\nECharts\r\n\u6570\u636e\u53ef\u89c6\u5316\u5728\u8fc7\u53bb\u51e0\u5e74\u4e2d\u53d6\u5f97\u4e86\u5de8\u5927\u8fdb\u5c55\u3002\u5f00\u53d1\u4eba\u5458\u5bf9\u53ef\u89c6\u5316\u4ea7\u54c1\u7684\u671f\u671b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u56fe\u8868\u521b\u5efa\u5de5\u5177\uff0c\u800c\u662f\u5728\u4ea4\u4e92\u3001\u6027\u80fd\u3001\u6570\u636e\u5904\u7406\u7b49\u65b9\u9762\u6709\u66f4\u9ad8\u7684\u8981\u6c42\u3002\r\nchart.setOption({\r\n    color: [\r\n        ","username":"","tagsname":null,"tagsid":"","catesname":null,"catesid":"","createtime":"1621910185"},"highlight":{"text":["chrome#em#浏#/em##em#览#/em##em#器#/em#不支持#em#video#/em##em#标#/em##em#签#/em#，不能自动播放。"]}}]}}"
</pre>string(14) "127.0.0.1:9200"
URL: http://192.168.101.128/searchcore/index.php/cihere_cn_db/_search<br>REQUEST:<pre>Array
(
    [query] => Array
        (
            [match] => Array
                (
                    [title] => Array
                        (
                            [query] => 大事记 - 安卓微信浏览器 video 标签层级过高
                        )

                )

        )

    [highlight] => Array
        (
            [fields] => Array
                (
                    [title] => stdClass Object
                        (
                        )

                )

            [pre_tags] => #em#
            [post_tags] => #/em#
        )

    [from] => 0
)
</pre>RESPONSE:<pre>bool(false)
</pre>string(14) "127.0.0.1:9200"
URL: http://127.0.0.1:9200/likecs_down_db/_search<br>REQUEST:<pre>Array
(
    [query] => Array
        (
            [bool] => Array
                (
                    [must] => Array
                        (
                            [0] => Array
                                (
                                    [match] => Array
                                        (
                                            [title] => Array
                                                (
                                                    [query] => 大事记 - 安卓微信浏览器 video 标签层级过高
                                                )

                                        )

                                )

                        )

                    [must_not] => Array
                        (
                            [0] => Array
                                (
                                    [term] => Array
                                        (
                                            [cate1] => 电子书籍
                                        )

                                )

                        )

                )

        )

    [highlight] => Array
        (
            [fields] => Array
                (
                    [title] => stdClass Object
                        (
                        )

                )

            [pre_tags] => #em#
            [post_tags] => #/em#
        )

    [size] => 5
    [from] => 0
)
</pre>RESPONSE:<pre>string(2745) "{"took":12,"timed_out":false,"_shards":{"total":1,"successful":1,"skipped":0,"failed":0},"hits":{"total":{"value":7633,"relation":"eq"},"max_score":21.50415,"hits":[{"_index":"likecs_down_db","_type":"_doc","_id":"48945","_score":21.50415,"_source":{"id":"48945","title":"openWYSIWYG \u6d4f\u89c8\u7f16\u8f91\u5668v1.4.7","spidertime":"1623052224","contenttime":"1674471666","pageimage":"https:\/\/img.jbzj.com\/do\/uploads\/litimg\/110524\/1539351011c.gif","tag":"Openwysiwyg|\u6d4f\u89c8\u5668|\u7f16\u8f91\u5668","cate1":"\u6e90\u7801\u4e0b\u8f7d","cate2":"\u5176\u5b83\u6e90\u7801","attr1":"111KB"},"highlight":{"title":["openWYSIWYG #em#浏#/em##em#览#/em#编辑#em#器#/em#v1.4.7"]}},{"_index":"likecs_down_db","_type":"_doc","_id":"60621","_score":21.50415,"_source":{"id":"60621","title":"php \u7396\u73a9\u6d4f\u89c8\u5668 20110901","spidertime":"1623068483","contenttime":"1676280125","pageimage":"https:\/\/img.jbzj.com\/do\/uploads\/litimg\/110902\/115551105N6.gif","tag":"\u7396\u73a9|\u6d4f\u89c8\u5668","cate1":"\u6e90\u7801\u4e0b\u8f7d","cate2":"php\u6e90\u7801","cate3":"php\u5176\u5b83","attr1":"255KB"},"highlight":{"title":["php 玖玩#em#浏#/em##em#览#/em##em#器#/em# 20110901"]}},{"_index":"likecs_down_db","_type":"_doc","_id":"95751","_score":20.404434,"_source":{"id":"95751","title":"asp FSO\u6587\u4ef6\u6d4f\u89c8\u5668 1.0","spidertime":"1623212306","contenttime":"1671317743","pageimage":"https:\/\/img.jbzj.com\/do\/uploads\/userup\/0812\/01202QGY5.gif","tag":"\u6587\u4ef6\u6d4f\u89c8\u5668|FSO|asp","cate1":"\u6e90\u7801\u4e0b\u8f7d","cate2":"asp\u6e90\u7801","cate3":"\u6570\u636e\u7ba1\u7406","attr1":"12KB"},"highlight":{"title":["asp FSO文件#em#浏#/em##em#览#/em##em#器#/em# 1.0"]}},{"_index":"likecs_down_db","_type":"_doc","_id":"31302","_score":20.404434,"_source":{"id":"31302","title":"asp FSO\u6587\u4ef6\u6d4f\u89c8\u5668 1.0","spidertime":"1622955154","contenttime":"1622955154","pageimage":"https:\/\/img.jbzj.com\/do\/uploads\/userup\/0812\/01202QGY5.gif","tag":"\u6587\u4ef6\u6d4f\u89c8\u5668|FSO|asp","cate1":"\u6e90\u7801\u4e0b\u8f7d","cate2":"asp\u6e90\u7801","cate3":"\u6570\u636e\u7ba1\u7406","attr1":"12KB"},"highlight":{"title":["asp FSO文件#em#浏#/em##em#览#/em##em#器#/em# 1.0"]}},{"_index":"likecs_down_db","_type":"_doc","_id":"48946","_score":19.411724,"_source":{"id":"48946","title":"Xinha \u652f\u6301\u591a\u79cd\u6d4f\u89c8\u5668v0.96.1","spidertime":"1623052225","contenttime":"1624415320","pageimage":"https:\/\/img.jbzj.com\/do\/uploads\/litimg\/110523\/1IR510K96.gif","tag":"|Xinha","cate1":"\u6e90\u7801\u4e0b\u8f7d","cate2":"\u5176\u5b83\u6e90\u7801","attr1":"4.48KB"},"highlight":{"title":["Xinha 支持多种#em#浏#/em##em#览#/em##em#器#/em#v0.96.1"]}}]}}"
</pre><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="zh-CN" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <title>大事记 - 安卓微信浏览器 video 标签层级过高 - 爱码网</title>
     
<meta name="keywords" content="javascript,vue,移动端,less,微信,video 工作笔记" />
<meta name="description" content="目录ECharts异步加载ECharts
数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。
chart.setOption({
    color: [" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="/statics/css/base.css?v=2.7" />
<script src="/statics/js/detail.min.js?v=2.2"></script>   
<script>
   $(document).ready(function () { 
		$("img").error(function () {
			$(this).hide();
		}); 
	}); 
</script>
</head>
<body class="home-template dtpg">
<nav class="main-nav clearfix">
    <div class="inner">
        <ul class="nav">
            <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/" title="爱码网">首页</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/1.html" title="前端技术">前端技术</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/9.html" title="编程语言">编程语言</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/31.html" title="人工智能">人工智能</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/41.html" title="运维知识">运维知识</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/52.html" title="资源下载">资源下载</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/68.html" title="常用小工具">常用小工具</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-886"><a href="/nav/72.html" title="技术问答">技术问答</a></li>
                    </ul>            
	 
    </div>
</nav><div class="site-wrapper">
 
    <header style="height: auto;padding: 10px 0px;" class="main-header">
        <div style="max-width:910px" class="main-header-content inner">
                        <h1 class="page-title"><a href="/show-48432.html" title="大事记 - 安卓微信浏览器 video 标签层级过高">大事记 - 安卓微信浏览器 video 标签层级过高</a></h1>
            
        </div>

    </header>
    <main class="content" role="main">
	

        <div class="leftbox">
    <article class="post tag-uifont tag-webview">
        <header class="post-header">
            <footer class="tc"> wisewrong 
                <time class="post-date" datetime="2019-01-16">2019-01-16</time>
            </footer>
        </header>
        <section class="post-content">
            <div class="contentbef">  
                  
                              </div>

            
                                    
<!--done-->
<div id="topics">
	<div class="post">
		
		
		<div class="postBody">
			<div id="likecs_post_body" class="blogpost-body">
<p><span style="color: #888888; font-size: 12px;">// 为什么叫《大事记》？</span></p>
<p><span style="color: #888888; font-size: 12px;">// 以前总有面试官问这样一个问题：“你在项目中遇到过最头疼的问题是什么，是怎么解决的？”</span></p>
<p><span style="color: #888888; font-size: 12px;">// 当时总觉得，已解决的问题都算不上头疼，所以回答总是不尽人意。</span></p>
<p><span style="color: #888888; font-size: 12px;">// 最近遇到微信端的这个问题，非常让人头疼，正好有小伙伴和我聊到面试经验，灵机一动，《大事记》由此而生</span></p>
<p><span style="font-size: 14px;"> </span></p>
<p><span style="font-size: 16px;"><strong>问题描述：</strong></span></p>
<p><span style="font-size: 14px;">在安卓系统的微信浏览器里面，&lt;video&gt; 标签触发了 play() 事件，即开始播放之后</span></p>
<p><span style="color: #800000; font-size: 14px;"><strong>&lt;video&gt; 标签的层级会变成 MAX 级别，无论如何设置 z-index，都会遮挡别的脱离文档流的元素</strong></span></p>
<p><span style="font-size: 14px;"><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTlwYldjeU1ERTRMbU51WW14dlozTXVZMjl0TDJKc2IyY3ZNVEExT1RjNE9DOHlNREU1TURFdk1UQTFPVGM0T0MweU1ERTVNREV4TmpFMU1UWXdPVFE0T0MwME16Z3dPRGN5TkM1d2JtYz0=" alt="" width="302" height="155"></span></p>
<p> </p>
<p><span style="font-size: 16px;"><strong>分析原因：</strong></span></p>
<p><span style="font-size: 14px;">微信的 X5 内核为了统一 &lt;video&gt; 在不同的手机上的呈现形式，对 &lt;video&gt; 进行了改造</span></p>
<p><span style="font-size: 14px;">这样的改造在 IOS 系统上一切正常，但在安卓系统就会有各种问题，比如这里的层级太高</span></p>
<p><span style="font-size: 14px;"> </span></p>
<p><span style="font-size: 14px;"> </span></p>
<p><span style="font-size: 16px;"><strong>解决方案：</strong></span></p>
<p><span style="font-size: 14px;">当测试的同事将这个 bug 提给我的时候，我根本没想到，我即将面对一场苦不堪言的角斗</span></p>
<p> </p>
<p><span style="font-size: 14px;"><strong>第一回合：隐藏 video</strong></span></p>
<p><span style="font-size: 14px;">最初暴露的问题并不是页面底部的按钮，而是一个弹窗</span></p>
<p><span style="font-size: 14px;">在了解了问题的原因之后，我当时的思路是：</span></p>
<p><span style="color: #800000; font-size: 14px;"><strong>打开弹窗的时候，将 &lt;video&gt; 标签隐藏掉，关闭弹窗的时候再显示 &lt;video&gt;</strong></span></p>
<p><span style="font-size: 14px;">隐藏标签的方法有很多：<strong><span style="color: #008080;">display:none;   visibility: hidden;  z-index: -1;   left: -9999px;  <span class="webkit-css-property">opacity: <span class="value">0;</span></span></span></strong></span></p>
<p><span style="font-size: 14px;">但 display:none 没有占位，visibility 和 z-index 不起作用，<span class="webkit-css-property">opacity 虽然不显示元素，但依旧点不到下面的元素</span></span></p>
<p><span style="font-size: 14px;"><span class="webkit-css-property">所以只有用定位的办法了</span></span></p>
<div class="likecs_code">
<pre><span style="font-size: 14px;">  let tag = document.createElement(<span style="color: #800000;">'style'</span><span style="color: #000000;">)
  tag.id </span>=<span style="color: #000000;"><span style="color: #0000ff;"> id</span>
  tag.innerHTML </span>= <span style="color: #800000;">`video { position: relative; left: -9999</span><span style="color: #000000;"><span style="color: #800000;">; }`</span>
  body.appendChild(tag)</span></span></pre>
</div>
<p><span style="font-size: 14px;">在打开弹窗的时候，通过上面的代码添加一个带有特殊 id 的 &lt;style&gt; 标签，然后在关闭时候根据 id 删除节点</span></p>
<p><span style="font-size: 14px;">为了防止多级弹窗的时候重复创建 &lt;style&gt;，在方法前面需要验证是否存在该 id</span></p>
<p><span style="font-size: 14px;">想通了这一系列逻辑之后，我猛然发现，页面底部的按钮也会被遮挡！</span></p>
<p> </p>
<p><span style="font-size: 14px;"><strong>第二回合：跳转到单独页面播放</strong></span></p>
<p><span style="font-size: 14px;">深思熟虑之后，我得出结论：<span style="color: #800000;"><strong>遮挡问题无解</strong></span></span></p>
<p><span style="font-size: 14px;">但问题还是要解决，于是我向 PM 提出，<span style="color: #0000ff;">单独写一个播放页面，点击 &lt;video&gt; 的时候跳转到这个页面进行播放</span></span></p>
<p><span style="font-size: 14px;">经过一番唇枪舌剑的交锋，PM 妥协了，但要求尽量优化体验，打开的播放页看起来要像全屏播放一样</span></p>
<p><span style="font-size: 14px;">“这都不是事儿！” 我如是回道</span></p>
<p> </p>
<p><span style="font-size: 14px;">播放页面确实不是事儿，可 &lt;video&gt; 真不是省油的灯</span></p>
<p><span style="font-size: 14px;">我原本想的是，全局添加一个 <span style="color: #008080;"><strong>addEventListener('click')</strong></span>，如果点击的是 &lt;video&gt; 标签，就保存视频信息，并跳转到播放页面</span></p>
<div class="likecs_code">
<pre><span style="font-size: 14px;"><span style="color: #008080;">document</span>.<span style="color: #ff9900;">addEventListener</span>(<span style="color: #800000;">'click'</span>, (e) =&gt;<span style="color: #000000;"> {
  let <span style="color: #008080;">target </span></span>=<span style="color: #008080;"> e.target
  </span><span style="color: #0000ff;">if</span> (<span style="color: #008080;">target.nodeName</span>.<span style="color: #ff9900;">toUpperCase()</span> === <span style="color: #800000;">'VIDEO'</span><span style="color: #000000;">) {
      </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.<span style="color: #ff9900;">setVideoUrl</span>({
      　　url: <span style="color: #008080;">target.src</span>,
      　　poster: <span style="color: #008080;">target.poster</span>
    })
    </span><span style="color: #0000ff;">this</span>.<span style="color: #008080;">$router</span>.<span style="color: #ff9900;">push</span>(<span style="color: #800000;">`/video`</span>)
<span style="color: #000000;">  }
})</span></span></pre>
</div>
<p><span style="font-size: 14px;">这下跳转是没问题了，但在点击的时候，实际上还触发了 &lt;video&gt; 的 play() 事件</span></p>
<p><span style="font-size: 14px;">从理论上来说，已经跳转页面了，这个 play() 事件并不需要阻止，但为了逻辑严谨，我还是做了尝试</span></p>
<div class="likecs_code">
<pre><span style="font-size: 14px;"><span style="color: #000000;">e.preventdefault()
e.stopPropagation()
e.cancelBubble()
</span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">false</span></span></pre>
</div>
<p><span style="font-size: 14px;">然而这并不能阻止播放事件 play()</span></p>
<p><span style="font-size: 14px;">那就不阻止了</span></p>
<p><span style="font-size: 14px;">然后又了新的 Bug：部分机型从播放返回之后，&lt;video&gt; 是播放的状态，而且有层级问题</span></p>
<p> </p>
<p><span style="font-size: 14px;"><strong>第三回合：禁用 controls</strong></span></p>
<p><span style="font-size: 14px;">我重新回到那个问题：如何阻止播放事件？</span></p>
<p><span style="font-size: 14px;">稍作挣扎，我就换了一个思路：<strong><span style="color: #800000;">如果没有播放按钮，那就不需要阻止播放事件了</span></strong></span></p>
<p><span style="font-size: 14px;">于是我给 &lt;video&gt; 添加了 <span style="color: #008080;"><strong>controls=""</strong></span></span></p>
<p><span style="font-size: 14px;">这样就没有播放工具栏，之后只需要手动添加一个三角形的播放图标，一切就完美了</span></p>
<p> </p>
<p><span style="font-size: 14px;">页面上的 &lt;video&gt; 是作为描述内容的一部分，包含在一段富文本里面，从后端返回的</span></p>
<p><span style="font-size: 14px;">这样一来，&lt;video&gt; 相关的 DOM 节点只能通过 JS 修改，成本太高，所以我打算只用 CSS 来解决播放图标的问题</span></p>
<p> </p>
<p><span style="font-size: 14px;">然后我画了一个播放的图标，给 &lt;video&gt; 添加了一个伪元素 <span style="color: #008080;"><strong>:before</strong></span>，在伪元素里写好了样式，但毫无作用</span></p>
<p><span style="color: #800000; font-size: 14px;"><strong>原来 &lt;video&gt; 并不支持伪元素</strong></span></p>
<p><span style="font-size: 14px;">“如果无法解决问题，那就让问题不存在”</span></p>
<p><span style="font-size: 14px;">我脑海中闪过这段话，然后有了新的方案：</span></p>
<p><span style="font-size: 14px;"><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTlwYldjeU1ERTRMbU51WW14dlozTXVZMjl0TDJKc2IyY3ZNVEExT1RjNE9DOHlNREU1TURFdk1UQTFPVGM0T0MweU1ERTVNREV4TmpFMk1qWTFOalUwT0MweE56a3hNekkxTnpRd0xuQnVadz09" alt="" width="297" height="166"></span></p>
<p><span style="font-size: 14px;">我又画了一张图，然后将 &lt;video&gt; 的 <span style="color: #008080;"><strong>poster</strong></span> 改成了这张图，问题解决了！</span></p>
<p><span style="font-size: 14px;">然后产品小姐姐跑过来：你对我的视频封面图做了什么？</span></p>
<p> </p>
<p><span style="font-size: 14px;"><strong>决战：js 王道</strong></span></p>
<p><span style="font-size: 14px;">既然 poster 不能改，那就只有通过 js 去操作 DOM，给 &lt;video&gt; 添加一个兄弟节点 &lt;i class="video-play_btn"&gt; 作为播放按钮</span></p>
<p><span style="font-size: 14px;">然后将 &lt;video&gt; 和播放按钮一起包在一个容器 &lt;div class="video-wrapper"&gt; 中</span></p>
<div class="likecs_code">
<pre><span style="font-size: 14px;"><span style="color: #000000;">setVideoWrapper () {
  </span><span style="color: #0000ff;">this</span>.$nextTick(() =&gt;<span style="color: #000000;"> {
    let v </span>= document.getElementsByTagName(<span style="color: #800000;">'</span><span style="color: #800000;">video</span><span style="color: #800000;">'</span><span style="color: #000000;">)
    </span><span style="color: #0000ff;">if</span> (v &amp;&amp; v[<span style="color: #800080;">0</span><span style="color: #000000;">]) {
      </span><span style="color: #008000;">//</span><span style="color: #008000;"> 产品规定 页面中只会有一个 &lt;video&gt;</span>
      let target = v[<span style="color: #800080;">0</span><span style="color: #000000;">]
      </span><span style="color: #008000;">//</span><span style="color: #008000;"> 防止重复创建 wrapper </span>
      <span style="color: #0000ff;">if</span> (target.parentNode.className === <span style="color: #800000;">'</span><span style="color: #800000;">video-wrapper</span><span style="color: #800000;">'</span>) <span style="color: #0000ff;">return</span>
      <span style="color: #008000;">//</span><span style="color: #008000;"> 清除 &lt;video&gt; 播放工具栏</span>
      target.controls = <span style="color: #800000;">''</span><span style="color: #000000;">
      target.className </span>= <span style="color: #800000;">'</span><span style="color: #800000;">video-hack</span><span style="color: #800000;">'</span>
      <span style="color: #008000;">//</span><span style="color: #008000;"> 创建播放按钮</span>
      let btn = document.createElement(<span style="color: #800000;">'</span><span style="color: #800000;">i</span><span style="color: #800000;">'</span><span style="color: #000000;">)
      btn.className </span>= <span style="color: #800000;">'</span><span style="color: #800000;">video-play_btn</span><span style="color: #800000;">'</span>
      <span style="color: #008000;">//</span><span style="color: #008000;"> 创建容器</span>
      let wrap = document.createElement(<span style="color: #800000;">'</span><span style="color: #800000;">div</span><span style="color: #800000;">'</span><span style="color: #000000;">)
      wrap.className </span>= <span style="color: #800000;">'</span><span style="color: #800000;">video-wrapper</span><span style="color: #800000;">'</span><span style="color: #000000;">
      wrap.appendChild(btn)
      wrap.appendChild(target.cloneNode())
      </span><span style="color: #008000;">//</span><span style="color: #008000;"> 插入容器并删除原本的 &lt;video&gt;</span>
<span style="color: #000000;">      target.parentNode.insertBefore(wrap, target)
      target.parentNode.removeChild(target)
    }
  })
}</span></span></pre>
</div>
<p><span style="font-size: 14px;">再添加对应的 LESS 样式：</span></p>
<div class="likecs_code">
<pre><span style="font-size: 14px;"><span style="color: #800000;">.video </span>{<span style="color: #ff0000;"><span style="color: #993300;">
  &amp;-wrapper {</span>
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 0</span>;
  }<span style="color: #800000;">
  &amp;-play </span>{<span style="color: #ff0000;"><span style="color: #993300;">
    &amp;_btn {</span>
      position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
      top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
      left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
      right</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
      bottom</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
      background</span>:<span style="color: #0000ff;"> rgba(0, 0, 0, .1) url('img/url') center/80px 80px no-repeat</span>;
    }<span style="color: #800000;">
  }
}</span></span></pre>
</div>
<p><span style="font-size: 14px;">终于，&lt;video&gt; 的问题彻底解决了，皆大欢喜，普天同庆</span></p>
<p><span style="font-size: 14px;">但我还是要吐槽一下，微信 &lt;video&gt; 的问题由来已久，开发团队也曾经说过要解决，但最后都不了了之</span></p>
<p><span style="font-size: 14px;">这大约都是时辰的错</span></p>
</div>




		</div>
		
	</div>
	</div>
<!--end: topics 文章、评论容器-->
 
                    
            
                <div style="margin-top: 10px;">
                  </div> 
        </section>
	 
        <footer class="post-footer">
            <section class="author">
                                <p>分类：</p> 
                                <a class="cateclass" href="/default/index/cates?cid=2564&cname=%E5%B7%A5%E4%BD%9C%E7%AC%94%E8%AE%B0" title="工作笔记">工作笔记</a>
                                                                <p>技术点：</p>
                                <a class="cateclass" href="/default/index/tags?cid=169&cname=javascript" title="javascript">javascript</a>
                                <a class="cateclass" href="/default/index/tags?cid=169&cname=vue" title="vue">vue</a>
                                <a class="cateclass" href="/default/index/tags?cid=169&cname=%E7%A7%BB%E5%8A%A8%E7%AB%AF" title="移动端">移动端</a>
                                <a class="cateclass" href="/default/index/tags?cid=169&cname=less" title="less">less</a>
                                <a class="cateclass" href="/default/index/tags?cid=169&cname=%E5%BE%AE%E4%BF%A1" title="微信">微信</a>
                                <a class="cateclass" href="/default/index/tags?cid=169&cname=video" title="video">video</a>
                                            </section>
        </footer>
        <p class="mt10">相关文章：</p>
        <div style="width: 100%;" class="contentcard">
      
            <div style="width: 100%;height: auto;" class="carditem litem clearfix"> 
                    <ul style="padding-left: 0rem;" class="cardcont">
                                                    <li>
                                <a  title="微信浏览器video播放视频踩坑" href='/show-509801.html' target="_blank"></a> 
                                <span>2021-11-08</span>
                            </li>
                                                        <li>
                                <a  title="video标签poster属性在安卓微信中不生效问题解决" href='/show-541471.html' target="_blank"></a> 
                                <span>2021-10-20</span>
                            </li>
                                                        <li>
                                <a  title="解决微信浏览器内video全屏问题" href='/show-536207.html' target="_blank"></a> 
                                <span>2021-10-19</span>
                            </li>
                                                        <li>
                                <a  title="解决微信浏览器video全屏的问题" href='/show-976066.html' target="_blank"></a> 
                                <span>2021-12-19</span>
                            </li>
                                                        <li>
                                <a  title="html5 video标签在低版本ie浏览器下怎么办？" href='/show-968601.html' target="_blank"></a> 
                                <span>2021-12-18</span>
                            </li>
                                                        <li>
                                <a  title="chrome浏览器不支持video标签，不能自动播放。" href='/show-203520136.html' target="_blank"></a> 
                                <span>2021-05-25</span>
                            </li>
                                                </ul>
               </div>   
         </div>
    </article>

  

</div>

<div class="rigthbox contentcard mt10">
 
          <div style="height: auto;" class="carditem litem">
    <div class="cardtit">猜你喜欢 </div>
        <ul class="cardcont">
                                 <li>
                    <a title="video 标签在微信浏览器的问题解决方法" href="/show-232925.html" target="_blank"></a> 
                    <span>2021-12-08</span>
                </li>
                                     <li>
                    <a title="Html5 video标签在微信内置浏览器上无法播放" href="/show-1023852.html" target="_blank"></a> 
                    <span>2022-01-07</span>
                </li>
                                     <li>
                    <a title="HTML 5 video 标签跨浏览器兼容" href="/show-153499.html" target="_blank"></a> 
                    <span>2021-11-17</span>
                </li>
                                     <li>
                    <a title="微信小程序video高层级的解决" href="/show-31091.html" target="_blank"></a> 
                    <span>2018-09-04</span>
                </li>
                                     <li>
                    <a title="安卓微信 清除微信浏览器内置缓存" href="/show-680929.html" target="_blank"></a> 
                    <span>2021-12-10</span>
                </li>
                                     <li>
                    <a title="让所有浏览器支持HTML5 video视频标签" href="/show-471112.html" target="_blank"></a> 
                    <span>2021-10-29</span>
                </li>
                                     <li>
                    <a title="微信内置浏览器字体缩放（安卓）" href="/show-298357.html" target="_blank"></a> 
                    <span>2021-09-08</span>
                </li>
                            </ul>
   </div> 

<div style="height: auto;" class="carditem litem">
    <div class="cardtit">相关资源 </div>
        <ul class="cardcont">
              
                                         <li>
                        <a title="openWYSIWYG 浏览编辑器v1.4.7下载" href="/down-48945.html" target="_blank">下载</a> 
                        <span>2023-01-23</span>
                    </li>
                                             <li>
                        <a title="php 玖玩浏览器 20110901下载" href="/down-60621.html" target="_blank">下载</a> 
                        <span>2023-02-13</span>
                    </li>
                                             <li>
                        <a title="asp FSO文件浏览器 1.0下载" href="/down-95751.html" target="_blank">下载</a> 
                        <span>2022-12-18</span>
                    </li>
                                             <li>
                        <a title="Xinha 支持多种浏览器v0.96.1下载" href="/down-48946.html" target="_blank">下载</a> 
                        <span>2021-06-23</span>
                    </li>
                                </ul>
   </div>
   
    <div style="height: auto;" class="carditem litem">
     <div class="cardtit">相似解决方案 </div>
         <ul class="cardcont">
                          </ul>
    </div>
  
   <div style="height: auto;background-color: #ddd;text-align: center;" class="carditem litem">
    <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5446233687289962" data-ad-slot="2607637140"  data-ad-format="auto"  data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div> 
   <div  style="height: auto;" class="carditem litem mt20">
    <div class="cardtit">热门标签  </div>
    <div class="tagbox">
                    <a target="_blank" title="Java" href="/default/index/tags?cid=164&cname=Java" >Java</a>
                        <a target="_blank" title="Python" href="/default/index/tags?cid=367&cname=Python" >Python</a>
                        <a target="_blank" title="linux" href="/default/index/tags?cid=274&cname=linux" >linux</a>
                        <a target="_blank" title="javascript" href="/default/index/tags?cid=169&cname=javascript" >javascript</a>
                        <a target="_blank" title="Mysql" href="/default/index/tags?cid=237&cname=Mysql" >Mysql</a>
                        <a target="_blank" title="C#" href="/default/index/tags?cid=187&cname=C%23" >C#</a>
                        <a target="_blank" title="Docker" href="/default/index/tags?cid=243&cname=Docker" >Docker</a>
                        <a target="_blank" title="算法" href="/default/index/tags?cid=344&cname=%E7%AE%97%E6%B3%95" >算法</a>
                        <a target="_blank" title="前端" href="/default/index/tags?cid=160&cname=%E5%89%8D%E7%AB%AF" >前端</a>
                        <a target="_blank" title="SpringBoot" href="/default/index/tags?cid=168&cname=SpringBoot" >SpringBoot</a>
                        <a target="_blank" title="Redis" href="/default/index/tags?cid=227&cname=Redis" >Redis</a>
                        <a target="_blank" title="Vue" href="/default/index/tags?cid=236&cname=Vue" >Vue</a>
                        <a target="_blank" title="spring" href="/default/index/tags?cid=696&cname=spring" >spring</a>
                        <a target="_blank" title="设计模式" href="/default/index/tags?cid=632&cname=%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F" >设计模式</a>
                        <a target="_blank" title=".net core" href="/default/index/tags?cid=381&cname=.net+core" >.net core</a>
                        <a target="_blank" title=".net" href="/default/index/tags?cid=300&cname=.net" >.net</a>
                        <a target="_blank" title="kubernetes" href="/default/index/tags?cid=2179&cname=kubernetes" >kubernetes</a>
                        <a target="_blank" title="c++" href="/default/index/tags?cid=312&cname=c%2B%2B" >c++</a>
                        <a target="_blank" title="数据库" href="/default/index/tags?cid=284&cname=%E6%95%B0%E6%8D%AE%E5%BA%93" >数据库</a>
                        <a target="_blank" title="数据结构" href="/default/index/tags?cid=247&cname=%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84" >数据结构</a>
                        <a target="_blank" title="大数据" href="/default/index/tags?cid=888&cname=%E5%A4%A7%E6%95%B0%E6%8D%AE" >大数据</a>
                        <a target="_blank" title="js" href="/default/index/tags?cid=159&cname=js" >js</a>
                        <a target="_blank" title="机器学习" href="/default/index/tags?cid=171&cname=%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0" >机器学习</a>
                        <a target="_blank" title="微服务" href="/default/index/tags?cid=832&cname=%E5%BE%AE%E6%9C%8D%E5%8A%A1" >微服务</a>
                        <a target="_blank" title="Android" href="/default/index/tags?cid=282&cname=Android" >Android</a>
                        <a target="_blank" title="Go" href="/default/index/tags?cid=839&cname=Go" >Go</a>
                        <a target="_blank" title="程序员" href="/default/index/tags?cid=327&cname=%E7%A8%8B%E5%BA%8F%E5%91%98" >程序员</a>
                        <a target="_blank" title="面试" href="/default/index/tags?cid=637&cname=%E9%9D%A2%E8%AF%95" >面试</a>
                        <a target="_blank" title="JVM" href="/default/index/tags?cid=727&cname=JVM" >JVM</a>
                        <a target="_blank" title="ASP.net core" href="/default/index/tags?cid=179&cname=ASP.net+core" >ASP.net core</a>
                        <a target="_blank" title="云原生" href="/default/index/tags?cid=22056&cname=%E4%BA%91%E5%8E%9F%E7%94%9F" >云原生</a>
                        <a target="_blank" title="人工智能" href="/default/index/tags?cid=270&cname=%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD" >人工智能</a>
                        <a target="_blank" title="后端" href="/default/index/tags?cid=1089&cname=%E5%90%8E%E7%AB%AF" >后端</a>
                        <a target="_blank" title="PHP" href="/default/index/tags?cid=281&cname=PHP" >PHP</a>
                        <a target="_blank" title="git" href="/default/index/tags?cid=226&cname=git" >git</a>
                        <a target="_blank" title="CSS" href="/default/index/tags?cid=817&cname=CSS" >CSS</a>
                        <a target="_blank" title="golang" href="/default/index/tags?cid=409&cname=golang" >golang</a>
                        <a target="_blank" title="k8s" href="/default/index/tags?cid=5067&cname=k8s" >k8s</a>
                        <a target="_blank" title="Nginx" href="/default/index/tags?cid=373&cname=Nginx" >Nginx</a>
                        <a target="_blank" title="Django" href="/default/index/tags?cid=634&cname=Django" >Django</a>
                        <a target="_blank" title="mybatis" href="/default/index/tags?cid=720&cname=mybatis" >mybatis</a>
                        <a target="_blank" title="深度学习" href="/default/index/tags?cid=345&cname=%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0" >深度学习</a>
                        <a target="_blank" title="多线程" href="/default/index/tags?cid=986&cname=%E5%A4%9A%E7%BA%BF%E7%A8%8B" >多线程</a>
                        <a target="_blank" title="React" href="/default/index/tags?cid=560&cname=React" >React</a>
                        <a target="_blank" title="架构" href="/default/index/tags?cid=2070&cname=%E6%9E%B6%E6%9E%84" >架构</a>
                        <a target="_blank" title="devops" href="/default/index/tags?cid=2662&cname=devops" >devops</a>
                        <a target="_blank" title="爬虫" href="/default/index/tags?cid=905&cname=%E7%88%AC%E8%99%AB" >爬虫</a>
                        <a target="_blank" title="云计算" href="/default/index/tags?cid=361&cname=%E4%BA%91%E8%AE%A1%E7%AE%97" >云计算</a>
                        <a target="_blank" title="Spring Boot" href="/default/index/tags?cid=201&cname=Spring+Boot" >Spring Boot</a>
                        <a target="_blank" title="LeetCode" href="/default/index/tags?cid=342&cname=LeetCode" >LeetCode</a>
                </div>
       
   </div>
   
        <div id="rightadbox" style="height: 300px;background-color: #ddd;text-align: center;" class="carditem litem">
            <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5446233687289962" data-ad-slot="2607637140"  data-ad-format="auto"  data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
        </div> 
</div>
<div class="clearfix"></div>
</main>
    
<div class="yllinks alink"></div>
 

<footer class="site-footer clearfix">
<section class="copyright">By &copy; 2026 <a href="/" title="www.likecs.com">likecs</a> 版权所有,<br/>本站所有数据收集于网络如有侵犯到您的权益请联系 进行下架处理1。 </section>
<section class="poweredby">  <a target="_blank" href="https://beian.miit.gov.cn/">粤ICP备22038628号</a>Powered By  WordPress </section>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({id: "Je3PjbvUssp6BbvY",ck: "Je3PjbvUssp6BbvY"})</script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?2eb031e42d29b7c1a1f16948d2ae2a9f";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</footer>  
</div>
<script>
    $(function(){
                    $(".post-content").append('<p style="padding: 20px;color: #cacaca;">原文链接：https://www.cnblogs.com/wisewrong/p/10276947.html</p>')  
            }) 
</script> 
</body>
</html>