zoukankan      html  css  js  c++  java
  • 04_html5简单入门——图片嵌入、分区响应、视频嵌入

    今天时每天坚持写博客的第四天,说实话有点累,才刚刚学了JS,现在是2:43

    本来打算不写html5,直接穿插JS的基础的,直接代码轰炸的

    但是想了想,做事要做绝,就是要继续写html5,写别的就少了一点意思了

    现在也挺累的,但是...坚持就是胜利,加油,奥里给!

    闲话少说,开始正文,这一次写的是和html5的图片嵌入、分区响应、视频嵌入

    Part 1 图片嵌入与分区响应

    先来一波代码

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title>
     6             嵌入图片与分区响应
     7         </title>
     8     </head>
     9     <body>
    10         <h1>改变按键大小</h1>
    11         <a href="https://fanyi.baidu.com/#zh/en/" target="_blank">
    12             <img src="./photo/up.jpg" width="128" alt="上传">
    13         </a>
    14 
    15         <h2>分区响应矩形</h2>
    16         <form>
    17             <input type="image" width="128" src="./photo/1234.jpg">
    18         </form>
    19         <img src="./photo/1234.jpg" width="128" usemap="1234">
    20         <map name="1234">
    21             <area shape="rect" coords="20,20,60,60" href="01_font.html" target="_blank">
    22             <area shape="rect" coords="70,20,110,60" href="02_excel.html" target="_blank">
    23             <area shape="rect" coords="20,70,60,110" href="03_excel2.html" target="_blank">
    24             <area shape="rect" coords="70,70,110,110" href="04_input.html" target="_blank">
    25         </map>
    26 
    27         <h2>分区响应圆形</h2>
    28         <form>
    29             <input type="image" width="128" src="./photo/c1234.jpg">
    30         </form>
    31         <img src="./photo/c1234.jpg" width="128" usemap="c1234">
    32         <map name="c1234">
    33             <area shape="circle" coords="58,22,10" href="01_font.html" target="_blank">
    34             <area shape="circle" coords="58,52,10" href="02_excel.html" target="_blank">
    35             <area shape="circle" coords="58,82,10" href="03_excel2.html" target="_blank">
    36             <area shape="circle" coords="58,112,10" href="04_input.html" target="_blank">
    37         </map>
    38     </body>
    39 </html>

    差点忘记说了,上面代码中的链接打开网址和图片地址要你们自己去设定,

    你们也可以去我博客园的相册里面找上面用到的图片,

    但是如果你真正想动手实践的话那还是自己找图片,自己去了解原理后再去分区

    打开网页时的效果如下


     


    上面大概就5个logo图片

    第一个图片是一个链接,同时也改变了原图的大小  <img src="./photo/up.jpg" width="128" alt="上传">

    将宽设置为128,由于没有设置高,故高随宽等比例变换

    alt="上传"表示如果图片加载失败的话,那么将用写有"上传"的按钮代替图片,类似于备用方案

    第二个图片是分区图的原图,同样也改了尺寸但是我们要做的是让他分区

    也就是说我们点击图片上面的1、2、3、4,是只会跳转到当前页面的

    <form><input type="image" width="128" src="./photo/1234.jpg"></form>

    作用是在不使用JS情况下通过点击图片确定“矩形边框”的左上右下对应的坐标

     就比如点击第二张图的某一位置时,再链接搜索栏里会出现你鼠标点击时的坐标

    然后上面代码的20到25行是将第二张图抠出4个小矩形(分区)

    当你按下不同的矩形时会跳转到不同网页,起到按键分区的作用

    map里面的属性name与前面第19行代码中的usemap对应

    shape="rect"是边框为矩形,coords="70,20,110,60"是矩形边框左上右下对应的坐标

    而上面的四图和五图也是同理

    但是有两点不同的是:shape="circle"为圆形边框和 coords="58,112,10"为圆形边框对应的圆心x和y坐标和圆的半径(32~37)

    这里先有意说明一点,我之前写代码的话默认打开浏览器是360浏览器(内核:IE),效果正常

    但是我在写博客的时候又去验证了一次,这是用的是chrome浏览器,他没有分区的效果,就很TM玄学

    然后换回360浏览器又可以,所以如果你们遇到我上面说的问题的话,那请面向百度解决问题

    解决不了的话就用360浏览器实验吧,起码懂最基本的操作

    Part 2 视频嵌入

    先上代码

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title>
     6             视频嵌入
     7         </title>
     8     </head>
     9     <body>
    10         <h1>video play</h1>
    11         <video src="./video/cat.mp4" height="256" controls>             <!-- 这里如果 controls 换成 autoplay ,那么视频将自动播放 -->
    12             <source src="./video/cat.mp4" type="video/mp4">
    13             <source src="./video/cat.ogv" type="video/ogg">  
    14         </video>
    15     </body>
    16 </html>

    打开网页时的效果如下



    视频链接可以自己录制,然后记得保存地址,然后更改上面代码的视频地址就行

    <video>里面的其他元素

    1、Preload 可为 None不会载入视频、Metadata载入视频第一帧、Auto请求下载真个视频

      这里也是出现视频的第一帧(默认)(因为上面代码没有设置Preload,所以默认为Auto)

    2、controls不设置的话不会出现视频进度条、是否静音、是否全屏的视频提示栏

    3、Loop视频循环播放(上面没有设置所以就只播放一遍,因为不喜欢洗脑循环(→_→))

    4、Poster 视频播放的封面,不设置的话默认为视频的第一帧(上面没有设置)

      这个可以参照b站那些视频,在你点击前有一个视频的封面,就是这个道理

    5、Muted 视频是否静音,默认不静音

    6、由于不同浏览器支持的视频格式可能不同且不全所以要在<video></video>里面加入<sourse>,

      备用方案,如果播放不了则会去选择sourse里面的视频

      一般五大浏览器只要设置 type="video/ogg" 和 type="video/mp4" 就能在这5大浏览器上正常播放

    7、<video>...</video>里面你输入文本是不会显示在视频上的,如<video...>今天天气真好</video>

    总结

    这次写了1h5min的博客,比预期时间多一点点,原因在于上面绿字花费了一点时间吧(。_。)

    这里也是希望大家如果实际开发过程中遇到什么问题,要想办法自己解决

    最后希望这篇简单的随笔能对你们有所帮助吧(= ̄ω ̄=)

    没用就当看着玩啦[狗头]

  • 相关阅读:
    Vue3手册译稿
    捉虫日记 | MySQL 5.7.20 try_acquire_lock_impl 异常导致mysql crash
    window资源管理器无反应,右键转圈圈
    二、DHCP原理简介
    一、以太网协议
    FreeRTOS系统环境下,全局变量频繁同时在不同任务改写也可能导致硬件中断(HardFault)
    查找生成文件的进程
    解决docker容器无法访问宿主机网络的问题
    TiDB在更新版本的时候初始化Prometheus的配置文件失败
    好喜欢lodop的介绍
  • 原文地址:https://www.cnblogs.com/yuange1433223/p/12840308.html
Copyright © 2011-2022 走看看