文档章节

HTML5 视频 音频,画布

我们取个名字叫珍惜
 我们取个名字叫珍惜
发布于 2016/10/11 08:37
字数 757
阅读 13
收藏 0

<body>

 

        <!-- HTML5将成为HTML新标准  新特性:

 

    1.用于绘画canvas元素

 

    2.减少对外部插件的需求(比如flash)

 

    3.对本地离线数据存储更好地支持

 

    4.新的元素:artice,footer.

 

    5.新的表单控件

 

-->规划好几块了;

 

        <!--视频播放-------------------------------------------------------------------------->

 

    <video width="320" height="240" controls="controls">

 

    <source src="http://play.g3proxy.lecloud.com/vod/v2/MTg3LzM1LzEvbGV0di11dHMvMTQvdmVyXzAwXzIyLTEwMzA3NTM5ODYtYXZjLTIwMDI1NS1hYWMtMzIwNDgtMTE5OTE3LTM2MTI3ODctOTk4OWE3NWJjZjI3NDdmZmU5MzkwMDM0ODE5NjRiODYtMTQ1NzQzMTgwNTI4Mi5tcDQ=?b=240&mmsid=47914418&tm=1475889931&key=1a7ed60ef584147e426dea1fc6b8a069&platid=3&splatid=345&playid=0&tss=no&vtype=21&cvid=1152227741508&payff=0&pip=d10591121ef50f0b35026a481678e5c4&format=0&sign=mb&dname=mobile&expect=1&tag=mobile&pid=10019476&xcid=24824681&xformat=normal">

 

</source>

 

第一种👆先在线搜索一段视频,尽量避免硕鼠不支持的视频,复制视频连接在硕鼠中进行解码,讲解完的代码复制到<source src="httpg*****后面

 

</video>

 

   <embed src="http://player.youku.com/player.php/Type/Folder/Fid//Ob//sid/XMTcwOTg2NTQzMg==/v.swf' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' allowFullScreen='true' mode='transparent' type='application/x-shockwave-flash">

 

第二种👆方法直接打开优酷视频,点击QQ图标下面的小三角,里面会出现HTML5源代码,将其全部复制过来就可以使用

 

</embed>

 

 

 

<!--音频 --------------          ----------------------------------------------------->    

 

    <audio controls="controls">

 

        <source src="张远喆-不配做你男朋友.mp3"></source>直接在本地拖进来一个音乐

 

    </audio>

 

 

 

</html>

 

<!--化布元素--------------------------------------------------------------->

 

    <canvas id="mayCanvas" width="200"  height="200" style="border: 1px solid black">

 

    </canvas>

 

           <script>

 

           //定义变量也就是设置画布

 

            var canvas=document.getElementById("mayCanvas")

 

            //获取上下文

 

            var content=canvas.getContext("2d")

 

            //线条颜色

 

            //--------------------第一条

 

            content.strokeStyle="red"

 

            //也可以设置起点

 

            content.moveTo(0,0);

 

//            context.lineTo(100,100);

 

            content.lineTo(200,200);

 

            content.lineWidth=2;

 

            //渲染

 

            content.stroke();

 

            

 

            //--------------------第二条

 

            //开始路径

 

            content.beginPath();

 

            content.moveTo(200,0);

 

            content.lineTo(0,200);

 

            content.lineWidth=4;

 

            //颜色

 

            content.strokeStyle="aqua";

 

            content.stroke();

 

            //--------------------第三条

 

            //开始路径

 

            content.beginPath();

 

            content.moveTo(0,100);

 

            content.lineTo(200,100);

 

            content.lineWidth=4;

 

            //颜色

 

            content.strokeStyle="hotpink";

 

            content.stroke();

 

            //--------------------第四条

 

            //开始路径

 

            content.beginPath();

 

            content.moveTo(100,0);

 

            content.lineTo(100,200);

 

            content.lineTo(200,100);

 

            content.lineWidth=4;

 

            //颜色

 

            content.strokeStyle="darkorchid";

 

            //闭合路径

 

            content.closePath();

 

            content.stroke();

 

            //矩形

 

//            content.beginPath();

 

//            content.fillRect(80,100,140,80);

 

//            content.fillStyle="yellow";

 

//            content.fill();

 

            

 

            //---------圆

 

            content.beginPath();

 

            content.arc(50,150,50,0,2*Math.PI,1);

 

            content.strokeStyle="cadetblue";

 

            content.lineWidth=5;

 

            content.stroke();

 

            

 

            //文本

 

            content.beginPath();

 

            content.font="20px Arial";

 

            content.lineWidth=1;

 

            content.strokeText("你好",0,150,200);

 

            

 

            

 

            //贝塞尔曲线

 

            content.beginPath();

 

            //先有一条轴,

 

            content.moveTo(0,100);

 

            content.quadraticCurveTo(10,10,50,100);

 

            content.stroke();

 

            

 

            

 

            

 

            //三次贝塞尔曲线

 

            content.beginPath();

 

            content.strokeStyle="green";

 

            //与轴相切

 

            content.moveTo(60,100);

 

            content.strokeStyle="blue";

 

            content.bezierCurveTo(85,10,100,120,200,100);

 

            content.stroke();

 

            

 

            //化控制轴

 

            //content.beginPath();

 

            //content.lineTo(cpx2,cpy2;)

 

            //    content 

 

            

 

            //颜色渐变

 

            //线性,径向

 

            content.beginPath();

 

            var grd=content.createLinearGradient(0,0,200,200);

 

            grd.addColorStop(0,"orange");

 

            grd.addColorStop(0.5,"green");

 

            grd.addColorStop(1,"red");

 

            content.fillStyle=grd;

 

            content.fillRect(0,0,200,200);

 

            

 

            

 

            //径向

 

            content.beginPath();

 

            //设定变量确定图形位置

 

            var grd2=content.createRadialGradient(100,100,50,100,100,100);

 

            //给图型设置渐变颜色第一种直接设置颜色,第二种用循环设置随机数

 

          //grd2.addColorStop(0,"red");

 

          //grd2.addColorStop(0,"yellow");

 

         //十六进制颜色。每两位代表一个颜色

 

         //grd2.addColorStop(0.7,"#99ff00");

 

        //grd2.addColorStop(1,"orange");

 

            

 

            //第二种用循环设置随机数

 

            for(var i=0;i<10;i++)

 

            {

 

                var red=Math.floor(Math.random()*256);

 

                var blue=Math.floor(Math.random()*256);

 

               var green=Math.floor(Math.random()*256);

 

                

 

            grd2.addColorStop(0.1*i,"rgba("+red+","+blue+","+green+",0.5)")

 

            

 

            }

 

            content.fillStyle=grd2;

 

            content.fillRect(0,0,200,200);

 

            

 

            

 

//            //定时器,先设置一个时间对象-------------------------

 

//            var timer=setInterval("writeA()",1000);

 

//            function writeA()

 

//            {

 

//            document.write("A" + "<br />");

 

//            //让计时器停止

 

//            clearInterval(timer);

 

//            }

 

 

 

  //设置进度条---------------------------------------------------------

 

     //先设定一个计时器

 

      var timer=setInterval("writeB()",1000);

 

       //全局变量

 

       var time=0;

 

              function writeB()

 

               {

 

                   //清屏

 

                   content.clearRect(0,0,200,200);

 

                   if(time<=360*Math.PI)

 

                   {

 

                   time++;

 

               content.beginPath();

 

            content.moveTo(100,100);

 

            content.arc(100,100,50,0,time/180*Math.PI,0);

 

            content.fillStyle="aqua";

 

            content.fill();

 

                   }

 

                   else{alert("加载完毕")

 

  //------------------------------------停止计时器

 

                  clearInterval(timer);

 

                       

 

                   }

 

      }

 

  //    ----------------    弹窗alert(x*y)---------------------

 

            document.write("mayCanvas");

 

            alert(canvas)

 

      </body>    

© 著作权归作者所有

我们取个名字叫珍惜
粉丝 4
博文 48
码字总数 19405
作品 0
嘉兴
程序员
私信 提问
分享7个漂亮的HTML5视频音频播放器及源码

网页视频音频播放器大家并不陌生,在IE中我们可以运行ActiveX来嵌入微软的Media Player或者其他的本地播放器,当然可能大部分我们都是使用Flash来制作播放器。在HTML5发展迅速的今天,让我们...

tp_wire
2012/07/11
34.1K
5
W3C发布浏览器对HTML5的兼容图表 IE9夺魁

万维网联盟(W3C)已经公布了其第一个HTML5一致性测试的结果,在网络标准上一直做得不到位的微软华丽地用Internet Explorer 9拿下HTML5兼容能力冠军宝座。 虽然HTML5规范还没有最后确定,但微软...

红薯
2010/11/02
477
5
主流浏览器CSS3和HTML5兼容性详细清单

天极网软件频道2011-05-26 15:26 分享到:我要吐槽   更多精彩相关文章推荐:   常用浏览器软件HTML5兼容性表现测试   IE和Firefox浏览器CSS兼容性技巧整理   CSS hack定义技巧浏览器...

波利beryl
2014/11/12
116
0
五大主流浏览器CSS3和HTML5兼容性大比拼

本文是一份IE,Chrome,Firefox, Safari,Opera五大主流大浏览器,在 Mac 和 Windows 两个平台,对 CSS3 和 HTML5 各种特性支持情况的详细清单。 各大主流浏览器对 CSS3 和 HTML5 的支持越来...

红薯
2011/05/26
4.7K
12
HTML5(目前)无法帮你实现的五件事

一直以来,很多人都专注于HTML5能够实现什么(或者是如何将各种方法连接起来,实现一个更加优雅的解决方案)。而现在,也不少人想将目光投向那些HTML5无法实现的事情。MSDN上微软员工thebeeb...

虫虫
2011/12/12
3.9K
22

没有更多内容

加载失败,请刷新页面

加载更多

Replugin借助“UI进程”来快速释放Dex

public static boolean preload(PluginInfo pi) { if (pi == null) { return false; } // 借助“UI进程”来快速释放Dex(见PluginFastInstallProviderProxy的说明) return PluginFastInsta......

Gemini-Lin
今天
4
0
Hibernate 5 的模块/包(modules/artifacts)

Hibernate 的功能被拆分成一系列的模块/包(modules/artifacts),其目的是为了对依赖进行独立(模块化)。 模块名称 说明 hibernate-core 这个是 Hibernate 的主要(main (core))模块。定义...

honeymoose
今天
4
0
CSS--属性

一、溢出 当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出 横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽 属性:overflow/overflow-x/overflow-y 取值...

wytao1995
今天
4
0
精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
今天
7
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部