zoukankan      html  css  js  c++  java
  • 2019.9.3视频播放

    首先要说的是目前Flash已被HTML5取代,具体取代的方面有:

    音频和视频 <video></video> <audio></audio>
    绘图 <canvas></canvas>
    动画 <canvas></canvas> + 定时器
    统计图表 <canvas></canvas> <svg></svg>
    客户端数据存储 WebStorage 

    今天就来看看视频播放具体是什么样的

    视频播放<video></video>

    属性有:

    autoplay 自动播放
    controls 是否显示播放控件,
    currentTime 播放到的当前时间
    duration 影片的总时长
    ended 是否播放到结尾了
    loop 是否循环播放
    paused 当前是否处于暂停状态

    方法有:

    play()开始播放
    pause()暂停播放

    下面我们来用video制作一个可以暂停和播放的播放器,注意不能用controls控件

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div{
    1280px;
    position: relative;
    margin: 50px auto;
    }
    img{
    position: absolute;
    left: 1%;
    bottom: 1%;
    cursor: pointer;
    }
    </style>
    </head>
    <body>
    <div>
    <video src="class/cherryMV.mp4" id="v1" muted></video>
    <img src="class/play (2).png">
    </div>
    <script>
    var img = document.getElementsByTagName('img')[0];
    var v1 = document.getElementById('v1');
    var i = 0;
    img.onclick = function(){
    if(i%2 == 0){
    v1.play();
    img.src="class/pause (2).png"
    }else{
    v1.pause();
    img.src="class/play (2).png"
    }
    i++;
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    prometheus client_golang使用
    etcd相关知识
    基于kubernetes v1.17部署dashboard:v2.0-beta8
    浅谈 Linux namespace
    使用kubeadm部署K8S v1.17.0集群
    和我一步步部署 kubernetes 集群
    go语言开发(二)---变量
    Golang学习笔记(一)-Go语言环境安装以及运行代码
    pycharm中设置pylint工具
    keeplive使用
  • 原文地址:https://www.cnblogs.com/awei313558147/p/11574727.html
Copyright © 2011-2022 走看看