video标签学习，实现有声音自动循环播放

赢吾主沉浮

已于 2022-04-19 21:26:01 修改

阅读量1.9w

点赞数 5

分类专栏：前端文章标签：前端 html5 音视频

于 2022-04-19 20:51:07 首次发布

本文链接：https://blog.csdn.net/shugyin/article/details/124282614

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

video标签核心属性：

src 要播放的视频的 URL。
autoplay 如果出现该属性，则视频在就绪后马上播放。
controls 如果出现该属性，则向用户显示控件，比如播放按钮，进度条等。
height 设置视频播放器的高度。
width 设置视频播放器的宽度。
autoplay 如果出现该属性，则视频在就绪后马上播放。 controls 如果出现该属性，则向用户显示控件，比如播放按钮,进度条等。
loop 如果出现该属性，视频播放结束会再次播放，即循环播放。
muted 静音播放。
poster 视频的封面图。
preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，该属性无效。

video不能自动播放的原因：

未加autoplay属性，或者autoplay属性为false
有的浏览器不允许非静音自动播放，如谷歌、火狐浏览器等，所以要加上muted属性，才会自动播放

思路一：重现调用播放，初始视频加载优化，不需用户互动。

可能存在的问题：1、加载效率；

思路二：增加页面互动实现有声音自动播放

这个思路可能体验没那么好，需要在播放器增加处理事件，比如按钮单击事件，或者移入移出事件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="G:\testfile\streammedia\videoPlayer\cvideo.css">

<script>
<!-- function openVoice() { -->
    <!-- var videoPlayer = document.getElementById("homeVideo") -->
    <!-- videoPlayer.muted = false -->
    <!-- videoPlayer.play() -->
<!-- }  -->
function play_v1(v){
        v.play()
    }
function stop_v1(v){
        v.pause();
    }
</script>
</head>
<body>
<!-- 思路一 -->
  <!-- <video width="720" height="640" autoplay loop controls > -->
  <!-- <source src="莫兰德单手劈扣领衔C.mp4" type="video/mp4"   > -->
  <!-- <source src="莫兰德单手劈扣领衔C.mp4" type="video/mp4"  onmouseover="play_v1(this)" onmouseleave="stop_v1(this)" > -->
  <!-- <script> -->

<!-- //因为我用的是videoPlayer 默认的设置是自动播放无声的，因为有声自动播放视频会暂停，浏览器不允许 -->
<!-- //1、在点击打开弹窗的同时并调用下面的方法 -->
<!-- //2、一 先把视频声音打开 这时候肯定视频就暂停了 二 然后再设置视频播放就解决了 中间时间忽略可以不计。 -->
<!-- // 打开视频 -->
  <!-- function  openTheVideo(){ -->
      <!-- this.CenterVideoDialogOff = true; -->
      <!-- this.$refs["CenterVideoDialog"].getVideoSrc(); -->
	  <!-- alert(this.$refs["CenterVideoDialog"].getVideoSrc()); -->
	  <!-- getVideo(); -->
    <!-- } -->
<!-- //有声播放视频 -->
<!-- function getVideo() { -->
      <!-- this.$refs.videoPlayer.player.muted(false); -->
      <!-- this.$refs.videoPlayer.player.play(); -->
<!-- } -->
<!-- </script> -->
  <!-- <source src="movie.ogg" type="video/ogg"> -->
  <!-- <source src="movie.webm" type="video/webm"> -->
  <!-- <object data="莫雷诺神奇救险领衔一.mp4" width="720" height="640"> -->
  <!-- <embed src="movie.swf" width="720" height="640"> -->
   <!--  </object> -->
<!-- </video> -->
<!-- 思路二 -->
<div>
        <div id="v1_box" class="demo1">
            <p>1：静音、自动播放</p>
            <video onmouseover="play_v1(this)" onmouseleave="stop_v1(this)"  muted src="莫兰德单手劈扣领衔C.mp4"></video>
        </div>
        <div id="v2_box" class="demo2">
            <p>2:有声音、自动播放（至少需要点击一下文档，产生交互）</p>
            <video onmouseover="play_v1(this)" onmouseleave="stop_v1(this)"  src="莫兰德单手劈扣领衔C.mp4"></video>
        </div>
    </div>
 
</body>
</html>

CSS:


body {
 margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
text-align: center;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
 #demo{
        height: 500px;
        width: 1400px;
    }
    .demo1{
        width: 700px;
        height: 500px;
        float: left;
    }
    .demo1 video{
        height: 400px;
        width: 400px;
    }
    .demo2{
        width: 700px;
        height: 500px;
        float: left;
    }
    .demo2 video{
        height: 400px;
        width: 400px;
    }