zoukankan      html  css  js  c++  java
  • HTML5——播放器

    有了H5的Video,妈妈再也不用担心我没安Flash插件了

    根据Video提供的方法和属性,简单练习了一下,不说废话,直接上图片和代码

    <html>
    <head>
    <title>一明播放器</title>
    <style type="text/css">
    *{
    margin:0px;padding:0px;
    }
    #v1{
    400px;
    }
    #divVideo{
    400px;height:340px;border:1px solid black;margin:50px auto;
    }
    input[type="button"]{
    70px;height:30px;
    }
    input:first-of-type{
    background-color:blue;
    }
    input:nth-of-type(2){
    background-color:red;
    }
    input:nth-of-type(3){
    background-color:pink;
    }
    </style>
    </head>
    <body>
    <div id="divVideo">
    <video controls id="v1">
    <source src="Intermission-Walk-in_512kb.mp4"/><br/>
    </video>
    <input type="button" value="暂停" id="btnPause"/>
    <input type="button" value="开始" id="btnPlay"/>
    <input type="button" value="重播" id="btnLoop"/>
    <input type="button" value="静音" id="btnMuted"/>
    </div>
    </body>
    </html>
    <script type="text/javascript">
    var btnPause=document.getElementById("btnPause");
    var btnPlay=document.getElementById("btnPlay");
    var btnLoop=document.getElementById("btnLoop");
    var btnMuted=document.getElementById("btnMuted");
    var v1=document.getElementById("v1");
    v1.poster="1.jpg";
    btnPause.onclick=function(){
    v1.pause();
    }
    btnPlay.onclick=function(){
    v1.play();
    }
    btnLoop.onclick=function(){
    v1.load();
    }
    btnMuted.onclick=function(){
    v1.muted=!v1.muted;
    }
    </script>

  • 相关阅读:
    基于visual Studio2013解决C语言竞赛题之1074八皇后
    Bit,Bytes,KB,MB,GB,TB,PB,EB,ZB,YB
    RFID系统的选择
    java中复制文本文件
    java中复制文本文件
    数据筛选和排序
    实现Windows程序的数据绑定
    实现Windows程序的数据更新
    使用ListView控件展示数据
    构建良好的windows程序
  • 原文地址:https://www.cnblogs.com/shuai7boy/p/5450753.html
Copyright © 2011-2022 走看看