选中内容(绿色)时除了会搜索文章名,还会搜索文章内容
点击结果中的文章名进入文章界面后可以按Ctrl+F在页面内搜索
  • 版权:CC BY-SA 4.0
  • 创建:2021-12-31
  • 更新:2022-01-06
要让 ios 自动循环播放视频,需要额外的参数设置


  1. <video preload="" muted="muted" autoplay="autoplay" loop="loop" x5-playsinline="" playsinline="" webkit-playsinline="" x5-video-player-type="h5"><source src="http://wiki.sipeed.com/hardware/zh/maixII/M2A/MaixSense/assets/M2A-1.mp4" type="video/mp4">
  2. Your brower not support video play!
  3. </video>

muted="muted" autoplay="autoplay" loop="loop" x5-playsinline="" playsinline="" webkit-playsinline="" x5-video-player-type="h5" 静音 自动循环播放可以让大多数浏览器自动循环播放,要让 ios 自动循环播放视频,需要额外的参数设置,加后面的参数后 ios 就能自动播放了

这样做可能有些设备(比如安卓设备和微信内置浏览器)还是不能播放, 主要是为了给移动设备节约流量, 所以最好的做法是发现用户在用流量让用户主动触发播放

  1. <div class="video_wrapper">
  2. <video class="video_player" src="a.mp4" poster="product.img" preload muted autoplay loop="-1" x5-playsinline="" x5-video-player-fullscreen="true" playsinline="" webkit-playsinline="" x5-video-player-type="h5" >
  3. Your brower not support video play!
  4. </video>
  5. <div class="play_mask" onclick="playVideo"></div>
  6. </div>
  1. playVideo(event) {
  2. // remove play button and paly video
  3. el = event.target
  4. el.style.display="none"
  5. player = el.parentElement.getElementsByTagName("video")[0]
  6. player.play()
  7. }

对于流量无限制的平台还是自动播放,这时就要判断平台是否使用了流量了,这个目前各个平台 API 做得不太完善,可以看这里 , 另外需要考虑主流特殊平台,比如 android 下的微信(ios可以),不管使用的是不是wifi,它都不允许自动播放,需要用户手动触发(2022.1.6,以后可能会变),所以需要检测微信内置浏览器做特殊处理即只要是微信浏览器就需要用户手动触发。

使用 window.WeixinJSBridgedocument.addEventListener("WeixinJSBridgeReady", function(){})来检测微信浏览器

  1. function isLimitedNetwork(){
  2. var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection || { tyep: 'unknown' };
  3. const notLimitTypes = ["ethernet", "wifi", "wimax"]
  4. const limitTypes = ["bluetooth", "cellular"]
  5. var system = {
  6. win: false,
  7. mac: false,
  8. x11: false,
  9. ipad:false
  10. };
  11. var p = navigator.platform;
  12. system.win = p.indexOf("Win") == 0;
  13. system.mac = p.indexOf("Mac") == 0;
  14. system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
  15. system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false;
  16. if(notLimitTypes.indexOf(connection.type) >= 0){
  17. return false
  18. }
  19. if((system.win || system.mac || system.x11 || system.ipad ) && (limitTypes.indexOf(connection.type)<0) ) {
  20. return false
  21. }
  22. return true
  23. }
  24. var isWechat = window.WeixinJSBridge
  25. if (!isWechat) {
  26. document.addEventListener("WeixinJSBridgeReady", function () {
  27. var players_mask = document.getElementsByClassName("play_mask")
  28. for(var i=0; i < players_mask.length; ++i){
  29. players_mask[i].style.display = "block"
  30. }
  31. }, false);
  32. }
  33. if(isLimitedNetwork() || isWechat){
  34. var players_mask = document.getElementsByClassName("play_mask")
  35. for(var i=0; i < players_mask.length; ++i){
  36. players_mask[i].style.display = "block"
  37. }
  38. }else{
  39. var players = document.getElementsByClassName("video_player")
  40. for(var i=0; i < players.length; ++i){
  41. players[i].play();
  42. }
  43. }
文章有误?有想法想讨论?查看或者发起勘误/讨论 主题
(发起评论需要先登录 github)

/wallpaper/wallhaven-j5jlzm.jpg