zoukankan      html  css  js  c++  java
  • HTML5 video视频

    代码格式

    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持Video标签。
    </video>

    注:

    <video> 元素提供了 播放、暂停和音量控件来控制视频。

    同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。

    <video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

    <video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。

    使用DOM控制

    HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。

    <video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.

    其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM 事件能够通知您,比方说,<video> 元素开始播放、已暂停,已停止,等等。

    实例:

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    </head>
    <body> 
    
    <div style="text-align:center"> 
      <button onclick="playPause()">播放/暂停</button> 
      <button onclick="makeBig()">放大</button>
      <button onclick="makeSmall()">缩小</button>
      <button onclick="makeNormal()">普通</button>
      <br> 
      <video id="video1" width="420">
        <source src="mov_bbb.mp4" type="video/mp4">
        <source src="mov_bbb.ogg" type="video/ogg">
        您的浏览器不支持 HTML5 video 标签。
      </video>
    </div> 
    
    <script> 
    var myVideo=document.getElementById("video1"); 
    
    function playPause()
    { 
        if (myVideo.paused) 
          myVideo.play(); 
        else 
          myVideo.pause(); 
    } 
    
        function makeBig()
    { 
        myVideo.width=560; 
    } 
    
        function makeSmall()
    { 
        myVideo.width=320; 
    } 
    
        function makeNormal()
    { 
        myVideo.width=420; 
    } 
    </script> 
    
    </body> 
    </html>

    今日问题:视频无法显示在浏览器中,无法播放

    明天继续学习HTML相关知识

  • 相关阅读:
    Java SSM入门(四)——Mybatis延迟加载、缓存、注解和小结
    Adam算法及相关Adaptive Learning Rate 自适应学习率
    20191229
    关于安装matlab FEAST过程(关于mex与工具包安装,附libsvm2.23和2017a安装教程网址)
    标准化和归一化(综合)
    [转]特征选择-weka搜索函数
    [转]怎样理解随机种子
    对神经网络输入是否做归一化
    点击邮箱名跳转到相对应的邮箱登陆页面
    在vue中使用document.execCommand实现复制文本的功能
  • 原文地址:https://www.cnblogs.com/mjhjl/p/14900600.html
Copyright © 2011-2022 走看看