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实战与剖析之媒体元素(1、video标签和audio标签简介)

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

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

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

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

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

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

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

html5新元素之video,audio,meter,datalist,keygen,output

通过标签,我们可以抛弃最近不怎么讨好的Flash,直接在页面中播放视频文件。视频文件自然是最符合语义化的文件格式,但该元素标签同样支持音频与图片。    过去(及目前),我们通常要使用类似下面这样...

HTML5实战与剖析之媒体元素(6、视频实例)

HTML5中的视频标签和及其模仿视频播放器的效果在一些手机端应用比较多。因为手机端基本上废除了flash的独断,让HTML5当家做主人,所以对视频支持的比较好。所以今天专门为大家奉上HTML5视频标签...

HTML5列表、表格、媒体、结构元素、iframe

列表: 无序列表: 语法: ........ ........ ........ 特性: 无序,块元素(独占一行)、默认内容之前加上实心小圆点 应用场景: 导航、侧边栏新闻、有规律的图文组合模...

HTML5中的video元素和audio元素

HTML5中的video元素和audio元素

HTML5知识学习之video元素作为DOM中的video对象的访问和创建形式介绍

HTML5中的video元素作为DOM中的video对象进行操作控制同样拥有方法、属性和事件,让我们在kphp框架网站中来讲解一下如何访问Video 对象和如何通过JavaScript代码来创建Vid...

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

提到HTML5中的媒体元素,那咱们可有的聊了,刚刚介绍完媒体元素的用法与简介,还没介绍有关媒体元素的相关属性呢,所以今天就为大家介绍一些有关HTML5中媒体元素的相关属性。
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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