• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > html5之多媒体详细介绍

html5之多媒体详细介绍

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含html5,多媒体等相关知识,匿名希望在学习及工作中可以帮助到您
1)video元素的属性:

autoplay——如果存在,此属性会使浏览器尽可能立即开始播放视频;

preload="none"——用户开始播放视频之前不会载入视频;

preload="metadata"——用户开始播放之前只能载入视频的元数据;

preload="auto"——请求浏览器尽快下载整个视频。浏览器可以忽略这个请求。这是默认行为;

controls——除非此属性存在,否则浏览器不会显示播放控件;

loop——如果存在,此属性会让浏览器反复播放视频;

poster——指定在视频数据载入时显示的图片;

height——指定视频的高度;

width——指定视频的宽度;

muted——如果此属性存在,视频从以开始就会处于静音状态;

src——指定要显示的视频;

1.1)source元素:向浏览器提供备选视频格式;

src——指定要显示的视频;

type——指定文件的MIME类型;

2)audio元素的属性与video元素的属性基本相同,不再赘述;

3)HTMLMediaElement对象的成员:

autoplay——获取或设置autoplay属性是否存在;

canPlayType(<type>)——获取浏览器能否播放特定MIME类型的提示;

currentSrc——获取当前的来源;

controls——获取或设置controls属性是否存在;

defaultMuted——获取或设置muted属性一开始是否存在;

loop——获取或设置loop属性是否存在;

muted——获取或设置muted属性是否存在;

preload——获取或设置preload属性的值;

src——获取或设置src属性的值;

volume——获取或设置音量,范围从0.0到1.0;

3.1)HTMLVideoElement对象的额外属性:

height——获取或设置height属性的值;

width——获取或设置width属性的值;

videoHeight——获取视频的原始高度;

videoWidth——获取视频的原始宽度;

poster——获取或设置poster属性的值;

3.2)HTMLMediaElement对象的回放成员:

currentTime——返回媒体文件当前的回放点;

duration——返回媒体文件的总时长;

ended——如果媒体文件已经播放完毕则返回true;

pause()——暂停媒体回放;

paused——如果回放暂停则返回true,否则返回false;

play()——开始回放媒体;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>上海远地资产管理有限公司</title>
    <meta name="author" content="jason"/>
    <meta name="description" content="上海远地资产管理有限公司(简称:远地资产),是一家专业的互联网金融服务平台."/>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
    <style type="text/css">
        table{
            border-collapse: collapse;
            border:thin solid black;
        }
        th,td{
            padding: 3px 4px;
        }
        body > *{
            float: left;
            margin: 2px;
        }
    </style>
</head>
<body>
    <video width="360" height="240" src="raw/timessquare.webm" autoplay controls preload="none" muted>

    </video>
    <video width="360" height="240" src="raw/timessquare.webm"  controls preload="none" muted>
        视频不能播放
    </video>
    <video width="360" height="240" src="raw/timessquare.webm"  controls preload="metadata" muted>
        视频不能播放
    </video>
    <video width="360" height="240" src="raw/timessquare.webm"  controls preload="none" poster="images/poster.png">
        视频不能播放
    </video>

    <video id="media" controls="controls" width="360" height="240">
        <source src="raw/timessquare.webm" type="video/webm"/>
        <source src="raw/timessquare.ogv" type="video/ogg"/>
        <source src="raw/timessquare.mp4" type="video/mp4"/>
        <embed src="http://player.youku.com/player.php/sid/XMTI3NjI2MzQ2MA==/v.swf"
               quality="high" width="360" height="240" align="middle" allowScriptAccess="always" allowFullScreen="true"
               mode="transparent" type="application/x
  


 

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03html5中关于div与span html块级元素的详细介绍
  • 2018-12-03基于javascript的组件开发方式
  • 2018-12-03HTML5 Canvas API中drawImage()方法的使用实例_html5教程技巧
  • 2018-12-03html5的canvas方法使用指南_html5教程技巧
  • 2018-12-03HTML5 CSS3新的WEB标准和浏览器支持_html5教程技巧
  • 2018-12-03vue中如何实现移动端的scroll滚动
  • 2018-12-03 小强的HTML5移动开发之路(3)——HTML5与HTML4比较
  • 2018-12-03HTML5新增属性:classList属性的使用方法
  • 2018-12-03HTML5实战与剖析之CSS选择器——getElementsByClassName()方法
  • 2018-12-03勤奋真的可以弥补天资的不足吗?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Html5如何实现文件异步上传功能的实例分析
    • H5中如何获取和设置自定义属性
    • 为什么人人网把 iOS 客户端从原生写成 HTML5,Facebook 却将半 HTML5 重写成原生?
    • HTML5中的postMessage API基本使用教程
    • HTML5 video播放器全屏(fullScreen)方法实例
    • html5使用canvas绘制一张图片
    • H5的LocalStorage本地存储使用详解
    • HTML5实现手势屏幕解锁
    • html5之canvas进阶的代码详解(图)
    • 在webstorm中使用H5的快捷键

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有