zoukankan      html  css  js  c++  java
  • HTML入门学习 HTML5 视频与音频

    HTML5教程参见

    http://www.w3school.com.cn/html5/index.asp

    HTML5对视频音频提供了原生支持,对图形图像也大大加强(除了IE10明确不支持WebGL以外,其它新的浏览器基本都支持Canvas、SVG、WebGL三种图形渲染方法)

    <!doctype html>
    <html>
    <head>
        <title>HTML5 学习1 杨韬 2012.11.10</title>
    </head>

    <body>
        <!-- 视频标签 -->
        <video controls="controls"> <!-- controls显示控制条 -->
            <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg"> <!-- 若写多行视频使用第一个被识别的 -->
            不支持视频时,该位置显示的文字
        </video>

        <!-- 视频控制 JS事件 -->
        <div>
            <button onclick="PlayFun()">播放暂停</button>
            <video id="video1" width="200" height="150">
                <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg">
            </video>
        
            <script type="text/javascript">
                
    var myVideo1=document.getElementById('video1');  //通过id获取元素

                
    function PlayFun() 
                {
                    
    if (myVideo1.paused) 
                          myVideo1.play();
    //JS大小写敏感
                    else 
                          myVideo1.pause(); 
                }    
            
    </script>
        </div>

        <!-- 音频标签 -->
        <div>
            <audio src="http://www.w3school.com.cn/i/song.ogg" controls="controls"></audio>
        </div>
    </body>
    </html>

    保存为.html文件在chrome等浏览器下,就可以看到HTML5内嵌的视频和音频了 

    杨韬的学习备忘录 http://www.cnblogs.com/ytyt2002ytyt

  • 相关阅读:
    CSS3动画基本的转换和过渡
    学习进度(2016.4.3)
    敏捷开发方法综述
    学习进度(2016.3.27)
    数组问题(二)求环形数组子数组和的最大值
    数组问题(一)求子数组和的最大值
    学习进度(2016.3.20)
    程序设计之四则运算三
    学习进度(2016.3.13)
    Right-BICEP 测试四则运算二程序
  • 原文地址:https://www.cnblogs.com/ytyt2002ytyt/p/2764473.html
Copyright © 2011-2022 走看看