zoukankan      html  css  js  c++  java
  • 前端多媒体相关

    音频播放

    点击试试:

    其中controls="controls"表示添加标准的控件,该标准控件依赖于浏览器

    <audio src="img/老街旧友故事和酒.mp3" controls="controls">音频播放失败</audio>

    属性补充

    自动播放(部分浏览器不支持,测试谷歌浏览器不支持,360浏览器可用)

    autoplay="autoplay"

    在音频结束后自动重新播放

    1 <audio autoplay="autoplay" loop="loop">
    2  <source src="img/do.mp3" />
    3 </audio>

    自定义播放/暂停按钮:

     1 <p>播放歌曲》》》</p>
     2 <audio src="img/老街旧友故事和酒.mp3">音频播放失败</audio>
     3 <button onClick="display()">播放/暂停</button>
     4 <script>
     5 var audioobj=document.getElementsByTagName("audio")[0];
     6 function display(){
     7     //判断音乐是否是暂停
     8     if(audioobj.paused) audioobj.play();
     9     else audioobj.pause();
    10 }    
    11 </script>

    视频播放

    1 <p>播放视频》》》</p>
    2 <video controls="controls" width="500px" height="300px" >
    3     <source src="img/vivi.mov" />
    4     <source src="img/do.mp4" />
    5     视频播放失败
    6 </video>

    属性补充

    音频属性均有,所以不在赘述

    1 document.body.innerHTML="<canvas id="canid" width="1000px" height="1900px"></canvas>    "
    2 var canobjx=document.getElementById("canid");
    3 resto=canobjx.getContext("2d");
    4 resto.fillStyle="#FF00FF";//设置颜色
    5 //resto.rotate(1);//旋转,参数(角度)
    6 resto.translate(300,100);//移动
    7 resto.scale(2,1);//缩放
    8 resto.fillRect(0,100,200,300);//填充矩形,参数(左上坐标,宽高)

     静音播放,部分浏览器实现自动播放需添加静音

    muted="muted"

    设置播放前显示的图片

    poster="https://img2018.cnblogs.com/blog/....png"

    绘制相关

    绘制形状

    1 document.body.innerHTML="<canvas id="canid" width="1000px" height="1900px"></canvas>    "
    2 var canobjx=document.getElementById("canid");
    3 resto=canobjx.getContext("2d");
    4 resto.fillStyle="#FF00FF";//设置颜色
    5 //resto.rotate(1);//旋转,参数(角度)
    6 resto.translate(300,100);//移动
    7 resto.scale(2,1);//缩放
    8 resto.fillRect(0,100,200,300);//填充矩形,参数(左上坐标,宽高)

    绘制图片

    1 document.body.innerHTML="<canvas id="canid" width="1000px" height="1900px"></canvas>    "
    2 var canobjx=document.getElementById("canid");
    3 resto=canobjx.getContext("2d");
    4 var imgx=new Image();
    5 imgx.src="img/0.jpg";
    6 imgx.onload=function(){
    7     resto.drawImage(imgx,100,200);//参数(图片对象,x,y)
    8 }

  • 相关阅读:
    86. Partition List
    328. Odd Even Linked List
    19. Remove Nth Node From End of List(移除倒数第N的结点, 快慢指针)
    24. Swap Nodes in Pairs
    2. Add Two Numbers(2个链表相加)
    92. Reverse Linked List II(链表部分反转)
    109. Convert Sorted List to Binary Search Tree
    138. Copy List with Random Pointer
    为Unity的新版ugui的Prefab生成预览图
    ArcEngine生成矩形缓冲区
  • 原文地址:https://www.cnblogs.com/dongxiaodong/p/10421310.html
Copyright © 2011-2022 走看看