HTML5 Video

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Audio & Video</title>
    <link rel="stylesheet" type="text/css" href="../icons/cus-icons.css">
    <script type="text/javascript" src="../jquery.js"></script>
    <script type="text/javascript">
        $(function() {
            /*
                媒体类型和特征值
                在Ogg容器中的Theora视频和Vorbis音频:type='video/ogg; codecs="theora, vorbis"'
                在Ogg容器中的Vorbis音频:type='video/ogg; codecs=vorbis'
                在Matroska容器中的WebM视频:type='video/webm; codecs="vp8, vorbis"'
                在MP4容器中的simple baseline H.264视频和low complexity ACC视频:type='video/mp4; codecs="mp4v.20.8,mp4a.40.2"'
                在MP4容器中的MPEG-4简单视频和简单ACC音频:type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'
                   
                常用控制函数
                load:加载音频/视频文件,为播放做准备。通常情况下没有必要,除非是动态生成的元素。用来播放前预载
                play:加载(如果有必要)并播放音频/视频文件。除非音频/视频暂停在其他位置,否则重头开始开始播放
                pause:暂停处于播放状态的文件
                canPlayType(type):测试Video元素是否支持给定MIME类型的文件,返回值为非二进制的“null”、“maybe”或“propably”,最好的情况下返回propably
                只读的媒体特性
                duration:整个媒体文件的播放时长,以s为单位。如果无法获取,返回NaN
                paused:如果媒体文件当前被暂停,返回true,尚未播放时,也返回true
                ended:如果媒体文件已经播放完毕,返回true
                startTime:返回最早的播放时间,一般是0.0,除非是缓冲过的媒体文件,并且一部分内容已经不在缓冲区
                error:在发生了错误的情况下返回的错误代码
                currentSrc:以字符串的形式返回当前正在播放或加载的文件
                可用脚本控制的特性值
                autoplay:将媒体文件设置为创建后自动播放,或者查询是否已经设置为自动播放
                loop:如果媒体文件播放完毕后能重新播放则返回true,或者将媒体文件设置为循环播放
                currentTime:以秒为单位返回从开始播放到现在所用的时间。在播放过程中,设置currentTime来进行搜索,
                    并定位到媒体文件的特定位置
                controls:显示或隐藏控制界面,或者查询用户控制界面当前是否可见
                volume:在0.0到1.0之间设置音频音量的相对值,或者查询当前音量相对值
                muted:为音频设置静音或者取消静音,查询当前是否为静音
                autobuffer:通知媒体播放器在媒体文件播放之前,是否进行缓冲加载。如果媒体
                    文件已经设置为autoplay,忽略此特性
                video元素额外的特性
                poster:在视频加载完成之前,代表视频内容的图片URL地址,可读可写
                width,height:读取或设置显示尺寸。可能会出现黑框
                videoWidth,videoHeight:返回视频的固有或自适应的宽度和高度,只读
                其可以被canvas函数调用
            */
               
                $('#movie').on('canplay', function(){
                    //播放之前触发
                    //alert('开始播放');
                    startVideo();
                }).on('ended', function(){
                    stopTimeline();
                });
                $('#timeline').on('click', function(e){
                    console.log(e);
                    var timeline = $(this);
                    var offX =  e.offsetX;
                    var offY = e.offsetY;
                    console.log(offX + ',' + offY);
                    var clickedFrame = Math.floor(offY / frameHeight) * frameRows;
                    clickedFrame += Math.floor(offX / frameWidth);
                    var seekedFrame = (((Math.floor(frameCount / frameGrid)) * frameGrid) + clickedFrame);
                    console.log(seekedFrame);
                    if(clickedFrame > (frameCount % 16)){
                        seekedFrame -= frameGrid;
                    }
                    if(seekedFrame < 0){
                        return ;
                    }
                    var video = $('#movie').get(0);
                    video.currentTime = seekedFrame * updateInterval / 1000;
                    frameCount = seekedFrame;
                });
                  
        });
                //抓取帧的时间间隔,单位ms
                var updateInterval = 5000;
                //时序中帧的尺寸
                var frameWidth = 100;
                var frameHeight = 75;
                //时序的总帧数
                var frameRows = 4;
                var frameColumns = 4;
                var frameGrid = frameRows * frameColumns;
                //当前帧
                var frameCount = 0;
                //播放完毕之后取消计时器
                var intervalId;
                var videoStart = false;
        //把帧绘制到画布上
        function updateFrame(){
            var video = $('#movie').get(0);
            var timeline = $('#timeline').get(0);
            var ctx = timeline.getContext('2d');
            var framePosition = frameCount % frameGrid;
            var frameX = (framePosition % frameColumns) * frameWidth;
            var frameY = (Math.floor(framePosition / frameRows)) * frameHeight;
            ctx.drawImage(video, 0, 0, 400, 300, frameX, frameY, frameWidth, frameHeight);
            frameCount++;
        }
        function startVideo(){
            if(videoStart){
                return  ;
            }
            videoStart = true;
            updateFrame();
            intervalId = setInterval(updateFrame, updateInterval);
        }
        function stopTimeline(){
            clearInterval(intervalId);
        }
    </script>
</head>
<body>
    <video id="movie" autoplay autobuffer="true" controls>
        <source src="file:///I:/Flex/mp4.mp4" />
        你的浏览器不支持Video标签
    </video>
    <canvas id="timeline" width="400px" height="300px">
           
    </canvas>
    <hr />
    <video controls>
        <source src="file:///I:/Flex/rmvb.rmvb" />
        你的浏览器不支持Video标签
    </video>
    <hr />
   <!--  <video controls>
        <source src="s" type='video/mp4; codecs="mp4v.20.8,mp4a.40.2"' />
        你的浏览器不支持Video标签
    </video>
    <hr />
    <video src="avi.avi" controls>
        <object data="CMONO.swf" type="application/x-shockwave-flash">
            <param name="movie" value="CMONO.swf">
        </object>
        你的浏览器不支持Video标签
    </video> -->
       
</body>
</html>


知识共享许可协议
《HTML5 Video》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
相邻依据:发表时间
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     152.74ms