草庐IT

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

赢吾主沉浮 2023-07-20 原文

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;
    }

有关video标签学习,实现有声音自动循环播放的更多相关文章

  1. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇,就使用ruby​​onrails自动化单元测试而言,你们正在做什么?您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您?git中的预提交Hook?只是手动调用?我完全理解测试,但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的,并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您? 最佳答案 不确定您到底想听什么,但是有几个级别的自动代码库控制:在处理某项功能时,您可以使用类似autotest的内容获得关于哪些有效,哪些无效的即时反馈。要确保您的提

  2. ruby - 树顶语法无限循环 - 2

    我脑子里浮现出一些关于一种新编程语言的想法,所以我想我会尝试实现它。一位friend建议我尝试使用Treetop(Rubygem)来创建一个解析器。Treetop的文档很少,我以前从未做过这种事情。我的解析器表现得好像有一个无限循环,但没有堆栈跟踪;事实证明很难追踪到。有人可以指出入门级解析/AST指南的方向吗?我真的需要一些列出规则、常见用法等的东西来使用像Treetop这样的工具。我的语法分析器在GitHub上,以防有人希望帮助我改进它。class{initialize=lambda(name){receiver.name=name}greet=lambda{IO.puts("He

  3. ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2

    我有多个ActiveRecord子类Item的实例数组,我需要根据最早的事件循环打印。在这种情况下,我需要打印付款和维护日期,如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询,用于查找maintenance和payment项目(非排他性查询),并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代

  4. ruby - 在院子里用@param 标签警告 - 2

    我试图使用yard记录一些Ruby代码,尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么?

  5. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样?我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用,需要1秒才能返回,我有100,000多个页面要访问,所以我试图运行多个线程来解决这个问题。有更好的方法吗?classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  6. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征,我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现,但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  7. css - 用 watir 检查标签类? - 2

    我有一个div,它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素?开始元素看起来像这样。如果输入不正确,添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  8. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目:明明的随机数题目输入描述输出描述:示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od,od薪资待遇,od机试题清单华为OD机试真题大全,用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  9. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  10. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

    我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中,我们希望成为我们的rails应用程序中的一等公民的几个类类型起源,这意味着它们应该驻留在应用程序的app文件夹下,它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来,我有点担心应用程序文件夹被这么多目录污染。因此,我想将它们移动到一个子目录/模块中,该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内,目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

随机推荐