简介:

  • 容器:不论是音频还是视频文件,实际上都是容器文件;

    • 视频文件包含了音频轨道、视频轨道和其他一些元数据;
    • 视频文件播放时,音频轨道和视频轨道是绑定在一起;元数据包含了该视频的封面、子标题、字幕等信息;
  • 主流视频容器支持格式:
    • Audio Video Interleave(.avi)
    • Flash Video(.flv)
    • MPGE4(.mp4)
    • Mattroska(.mkv)
    • Ogg(.ogv)
  • 编/解码器:
    • 一组算法,用来对一段特定视频或音频进行解码和编码;
    • 由于一些原因,当前没有任意一种编解码器可以被所有浏览器厂商支持;
    • 目前HTML5规范中并没有对编解码器做要求;

 浏览器支持:

<video src='../test.webm' controls>
<object data='videoplayer.swf' type='application/x-shockwave-flash'>
<param name="movie" value="video.swf">
</object>
</video>

以插件方式播放视频的代码为备选内容;不过考虑到各种浏览器,可能需要多种视频格式;

WebVTT文件: 一个WebVTT(.vtt)文件是一个简单的纯文本,里面包含了几种类型的视频信息:

  • 字幕:关于对话的转译或者翻译。
  • 标题:类似于标题,但是还包括音响效果和其他音频信息。
  • 说明:预期为一个单独的文本文件,通过屏幕阅读器描述视频。
  • 章节:旨在帮助用户浏览整个视频。
  • 元数据:默认不打算展示给观众的、和视频有关的信息和内容。但是你可以使用Javascript来访问。
test.vtt
---------
1
00:00:01.000 --> 00:00:18.000
At the left we can see... test.html
------------
<video src='../test.webm' controls>
<track src="test.vtt" kind="subtitles" srclang="en" label="English" />
</video>

理解媒体元素:

  • 声明媒体元素:audio/video ; controls //如果不指定controls,浏览器将无法显示通用的控件,可用在如背景音乐;
  • source元素:用于备用声明包含来源
    <audio controls>
    <source src = 'test.ogg'>
    <source src = 'test.mp3'>
    </audio>

    来源列表的顺序,最好按照用户由高到低或者服务器消耗由低到高;  

  • 媒体的控制:
    • autoplay:自动播放,在不设置controls的情况下设置,如广告。//注意不是每种设备都支持自动播放,IOS就不支持;
    • 常用控制函数:load()、play()、pause()、canPlayType();
    • 只读媒体特性:durationo、paused、ended、startTime、error......
    • 可用脚本控制的特性值:autoplay、 loop、 muted...............

使用audio

  • 设置背景音乐:

    <body>
    <audio id='musci'>
    <source src='test.ogg'>
    <source src='test.mp3'>
    </audio> <button id='toggle' onclick='toggleSound()'>Play</button>
    </body> <script type="text/javascript">
    function toggleSound() {
    var music = document.getElementById('musci');
    var toggle = document.getElementById('toggle');
    if(music.paused) {
    music.play();
    toggle.innerHTML = 'Pause';
    } else {
    music.pause();
    toggle.innerHTML = 'Play';
    }
    }
    </script>

使用video

  • 额外特征

    • poster:视频加载前的内容图片url地址
    • width/height:设置尺寸或读取设置的尺寸;
    • videoWidth/videoHeight:返回视频固有宽高;只读
  • 创建一个视频时序查看器:
    <body>
    <video src='./test.webm' controls id='movies' autoplay oncanplay='startVideo()' onended='stopTimeline()'>
    <object data='videoplayer.swf' type='application/x-shockwave-flash'>
    <param name="movie" value="video.swf">
    </object>
    </video> <canvas id='timeline' width='400px' height='300px'> </canvas>
    </body> <script type="text/javascript">
    //设置帧更新的间隔
    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 videoStarted = false; function startVideo() {
    //确保第一次播放才触发
    if(videoStarted) {
    return
    }
    videoStarted = true; updateFrame();
    intervalId = setInterval(updateFrame, updateInterval); var timeline = document.getElementById('timeline');
    timeline.onclick = function(evt) {
    var video = document.getElementById('movies');
    //计算出第几个,0开始计算
    var offX = evt.layerX;
    var offY = evt.layerY;
    var clickedFrame = Math.floor(offY / frameHeight) * frameRows;
    clickedFrame += Math.floor(offX / frameWidth) ; var totalTimes = Math.floor(frameCount / 16) * 16 + clickedFrame;
    if(clickedFrame > (frameCount % 16)) {
    totalTimes -= 16;
    } video.currentTime = totalTimes * updateInterval / 1000;
    }
    } //把帧绘制到画布上
    function updateFrame() {
    var video = document.getElementById('movies');
    var timeline = document.getElementById('timeline'); var ctx = timeline.getContext('2d');
    //当前播放位置
    var framePosition = frameCount % frameGrid;
    var frameX = (framePosition % frameColumns) * frameWidth;
    var frameY = (Math.floor(framePosition / frameRows)) * frameHeight;
    //canvas的绘制程序可以将视频源当作图像绘制
    ctx.drawImage(video, 0, 0, 400, 300, frameX, frameY, frameWidth, frameHeight); frameCount++;
    }
    function stopTimeline() {
    clearInterval(intervalId);
    } </script>
    • 获取当前时间video.currentTime;
    • 当前加载可播放事件:oncanplay;
    • 当前播放结束事件:onended;
  • 一些其他设置例子:
<video src='./test.webm' controls id='movies' autoplay onmouseover='this.play()'onmouseout='this,pause()'>
<object data='videoplayer.swf' type='application/x-shockwave-flash'>
<param name="movie" value="video.swf">
</object>
</video>

  

05-11 22:20