HTML5 媒体元素--------video

原创 2015年11月20日 22:36:52

18 Nov 2015 - Jinzhou

首先来学习一个英文单词: codec ,意思是编解码器。


视频格式

当前,video 元素支持三种视频格式:

video format

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件


嵌入视频

<video width="640" height="360"
src="somename.mp4"/>

一些属性

preload:预加载视频内容。

autoplay:自动播放。

loop: 循环播放。

controls:显示内建的播放控制键。

poster:可替换图片文件。


定制视频控件

html代码:

<div id="video_container">

    <video width="640" height="360"
    src="somename.mp4" />
</div>
<div id="video_controller">
    <button id="btn_play">Play</button>
    <button id="btn_pause">Pause</button>
    <button id="btn_fullscreen">Full Screen</button>
    <input type="range" step="any" id="seekbar"/>
    <button id="btn_mute">Mute</button>
    <label id="time">-:--:--</label>
</div>

javascript代码:

var video;
window.onload = function() {
    video = document.getElementsByTagName("video")[0];
    var btn_play = document.getElementById("btn_play");
    var btn_pause = document.getElementById("btn_pause");
    var btn_mute = document.getElementById("btn_mute");
    var btn_volume = document.getElementById("btn_volume");
    var seekbar = document.getElementById("seekbar");
    var btn_fullscreen = document.getElementById("btn_fullscreen");
    btn_play.addEventListener('click', doPlay, false);
    btn_pause.addEventListener('click', doPause, false);
    btn_mute.addEventListener('click', doMute, false);
    video.addEventListener('timeupdate', updateTime, false);
    video.addEventListener('durationchange', initSeekbar, false);
    seekbar.addEventListener('change', changeTime, false);
    btn_fullscreen.addEventListener('click', forceFullScreen, false);

    btn_volume.value = video.volume;
    btn_volume.addEventListener('change', function(e) {
        myVol = e.target.value;
        video.volume = myVol;

        if (myVol === 0) {
            video.muted = true;
        } else {
            video.muted = false;
        }
        return false;
    },true);
};

function doPlay() {
    if(video.paused) {
        video.play();
    } else if(video.ended) {
        video.currentTime = 0;
        video.play();
    }
}

function doPause() {
    if(video.play) {
        video.pause();
    }
}

function doMute() {
    video.muted = true;
}

function updateTime() {
    var sec = video.currentTime;
    var h = Math.floor(sec/3600);
    sec = sec%3600;
    var min = Math.floor(sec/60);
    sec = Math.floor(sec%60);

    if(sec.toString().length < 2) {
        sec = "0" + sec;
    }
    if(min.toString().length < 2) {
        min = "0" + min;
    }

    document.getElementById('time').innerHTML = h + ":" + min + ":" + sec;

    var bufferPostion = video.buffered.end(video.buffered.length-1);
    seekbar.min = video.startTime;
    seekbar.max = bufferPostion;
    seekbar.value = video.currentTime;
}

function initSeekbar() {
    seekbar.min = video.startTime;
    seekbar.max = video.startTime + video.duration;
}

function changeTime() {
    video.currentTime = seekbar.value;
}

function forceFullScreen() {
    video.webkitEnterFullscreen();
}

在chrome中测试成果:

videocontrols

诶呦,不错哦。

Tips:在设置进度条的时候没有得到预期效果,根据提示做出了如下修改:

  1. initSeekbar()

    function initSeekbar() {
        seekbar.min = video.startTime;
        seekbar.max = video.startTime + video.duration;
    }
    
  2. updateTime()

    var bufferPostion = video.buffered.end(video.buffered.length-1);
    seekbar.min = video.startTime;
    seekbar.max = bufferPostion;
    seekbar.value = video.currentTime;
    

buffered属性返回TimeRanges对象,该对象包含length属性、start()方法和end()方法。

HTML5实战与剖析之媒体元素(2、媒体元素的属性)

提到HTML5中的媒体元素,那咱们可有的聊了,刚刚介绍完媒体元素的用法与简介,还没介绍有关媒体元素的相关属性呢,所以今天就为大家介绍一些有关HTML5中媒体元素的相关属性。...
  • LiMengXiaoLong
  • LiMengXiaoLong
  • 2014年04月18日 14:31
  • 2366

三天学会HTML5 ——多媒体元素的使用

目录1. HTML5 Media-Video2. HTML5 Media-Audio3. 拖拽操作4. 获取位置信息5. 使用Google 地图获取位置信息   多媒体是互联网中的最重要的一部分,无论...
  • powertoolsteam
  • powertoolsteam
  • 2016年02月24日 09:06
  • 2181

使用HTML5的video标签播放视频

除非你一直生活在一个偏远的岛屿上,过去一年左右的时间,你应该已经听说过HTML5的各式炒作。HTML5将重塑富Web应用的未来。 下面 Figure 1的示例展示了HTML5中video标签与传...
  • coloriy
  • coloriy
  • 2015年07月14日 14:15
  • 9865

HTML5实战与剖析之媒体元素(1、video标签和audio标签简介)

随着HTML5的到来,flash在手机端全部不能得到支持,这就使一项以flash制作的音乐播放和视频播放只能用HTML5中的媒体标签video标签和audio标签来制作了。很恰巧的是,移动端对HTML...
  • LiMengXiaoLong
  • LiMengXiaoLong
  • 2014年03月24日 10:01
  • 2157

【前端知识点】HTML5 浅谈 媒体标签<video><audio>

html5播放器细谈,从大众自带浏览器 到 wechat和QQ以x5内核的浏览器,以及UC其他特殊的浏览器在此不再细谈:)当然也会分析iphone ios系统和Android手机系统的差别。【基本属性...
  • chaunceyw
  • chaunceyw
  • 2016年07月21日 16:51
  • 2581

webkit移动开发笔记:html5中video与audio标签之无法自动播放的audio元素

https://www.zoomla.cn/help/web/2221.shtml 作者:本站编辑 发布时间:2014-06-07 来源:本站原创 点击数:9756 ...
  • u011537073
  • u011537073
  • 2016年04月22日 20:06
  • 1998

Html5初探-视频元素video示例

这个还是承接上一篇文章《光盘项目所学》,是在光盘项目中需要的一些简单的技术,自己在学习的过程中做的一个demo。关于html5方面,我并没有太多的深入研究,所以也说不出什么理论的东西,仅将示例代码贴出...
  • sundenskyqq
  • sundenskyqq
  • 2013年04月24日 18:04
  • 2539

HTML5学习笔记简明版(4):新元素之video,audio,meter,datalist,keygen,output

video 通过标签,我们可以抛弃最近不怎么讨好的Flash,直接在页面中播放视频文件。视频文件自然是最符合语义化的文件格式,但该元素标签同样支持音频与图片。 过去(及目前),我们通常要使...
  • u013948190
  • u013948190
  • 2015年07月19日 11:39
  • 680

HTML5中video元素事件详解

事 件的处理方式 在利用video元素或audio元素读取或播放媒体数据的时候,会触发一系的事件,如果使用JavaScript脚本来捕捉这些事件,就可以对这些事件进行处理了。对这些事件的捕捉及处...
  • zhuchunyan_aijia
  • zhuchunyan_aijia
  • 2016年08月22日 16:16
  • 3945

HTML5多媒体播放video元素

在HTML5问世之前,要在网络上展示视频、音频和动画,除了使用第三方自主开发的播放器外,使用得最多的工具 应该是FLASH了,便它们都需要在浏览器中安装各种插件才能使用,而且有时速度很慢。HTML5的...
  • zhuchunyan_aijia
  • zhuchunyan_aijia
  • 2016年08月22日 15:36
  • 233
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5 媒体元素--------video
举报原因:
原因补充:

(最多只允许输入30个字)