您的位置: 首页  >  文章  >  web前端-5-HTML5

web前端-5-HTML5

分类: 文章 • 2025-03-25 15:07:09

5.29 周五

1.<video> 支持格式：MP4 、ogg、webM

Autoplay :是否马上播放

Controls：显示播放控件，控制播放

Height：播放器高度；Width：视频播放器宽度

Loop：循环播放

Muted：静音播放

Poster：规定视频下载时显示的图像，或者静态时显示的帧图像

Preload：使用autoplay可忽略该属性，可以理解为 预加载？

Src：视频路径

<video src="image/movie.mp4" autoplay controls loop width="300px"></video>

             <video autoplay="autoplay">

               <source src="image/movie.mp4">

           </video>

           <video autoplay="autoplay" controls="controls">

               <source src="image/movie.mp4">

</video>

以上书写格式效果相同，但autoplay和controls组合才实现自动播放，单一实现不了，不知道是不是浏览器设置问题，还未找到原因。

2.Audio标签

    类似于video标签，支持格式：MP3，WAV，ogg

    Autoplay、controls、loop、muted、preload、src。

    注：loop为负数或无参数为无限播放。

<audio src="image/1.mp3" controls autoplay loop></audio>

<scource>允许将文件改为浏览器支持的格式

3.<embed>标签：

引用网上视频资源：优酷有上传功能另分享功能中的HTML5代码加入到自己代码。

4.<canvas>标签

       Canvas只是容器，可通过坐标控制在canvas上绘制图形，

一般配合js实现复杂动画图像。

画布是一个矩形区域，可控制每一个像素

Canvas拥有多种绘制路径，矩形、圆形。。。

方法：

getContext（）：返回一个对象，这个方法封装了很多的绘图方法和属性，但现在只提供2D绘画环境

Rect()：创建矩形

fillRect（）：绘制填充的矩形

属性：

fillStyle：填充绘画的颜色。

strokeStyle：用于笔触的颜色、渐变或模式

<head>
    <meta charset="UTF-8">
    <title>画布</title>
    <style type="text/css">
        canvas{
            background:wheat;
        }
    </style>

</head>
<body>
<canvas id="mycanvas" width="400px" height="400px">
您的版本太低
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("mycanvas");
var obj=canvas.getContext("2d");
//getCOntexr返回一个对象，封装了很多绘图方法和属性
// obj.rect(0,0,100,100); rect创建矩形
    obj.fillStyle="red"//改变填充颜色
    obj.strokeStyle="green"//改变矩形颜色
    obj.fillRect(0,0,100,100);//创建填充矩形
    obj.strokeRect(100,100,100,100);//没有填充过的矩形
</script>

web前端-5-HTML5

若

var colorobj=obj.createRadialGradient(50,50,10,50,50,50);//三个圆心坐标，圆形渐变

// var colorobj=obj.createLinearGradient(0,0,100,0);//方法创建渐进渐变色，矩形变

web前端-5-HTML5

相关推荐