关闭

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

标签: html5视频video
327人阅读 评论(0) 收藏 举报

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()方法。

0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2338次
    • 积分:134
    • 等级:
    • 排名:千里之外
    • 原创:6篇
    • 转载:3篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档