实现视频自动播放功能

复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <video
      id="video"
      onloadeddata="this.play();"
      poster="poster.png"
      autoplay="autoplay"
      playsinline
      loop
      muted
      controls
    >
      <source
        src="https://v.geilicdn.com/video/template1620887566-2cc60000017fd99651050a207569.mp4.f20.mp4"
        type="video/mp4"
      />
      Your browser does not support the video tag or the file format of this
      video.
    </video>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
      var video = document.getElementById("video");
      document.addEventListener(
        "WeixinJSBridgeReady",
        function () {
          video.play();
        },
        false
      );
      video
        .play()
        .then((res) => {
          console.log(11111);
        })
        .catch((e) => {
          alert("不能自动播放");
          video.play();
          video.muted = true;
          video.pause();
          video.play();
        });
    </script>
  </body>
</html>
复制代码

 

posted @   zt123123  阅读(365)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示