mp4格式-播放和断点续播

video 标签(autopaly自动播放属性)

   <video id="videoPlay" class="video" autoplay="autoplay" poster="" width="1200" height="100%" style="text-align: -webkit-center; margin: 0 auto;" controls="" preload="">
                        <source src="video/mp4/环保小视频.mp4" type="video/mp4">
                    </video>
var time;
var xutime;
var CurrentTime;
var RemainingTime;

var video = document.getElementById(‘videoPlay‘);

//播放结束事件
video.onended = function () {
    console.log("视频播放完成");
    clearInterval(time);
    clearInterval(xutime);
};

//播放开始事件
video.oncanplay = function () {
    console.log("视频播放开始");
    //播放总时长
    RemainingTime = video.duration.toFixed(0);
    console.log(RemainingTime);
    //是否可以续播
    var TimeInt = TimeIntervalSelect();
    //可以
    if (TimeInt > 0) {
        //播放进度加1秒后小于总时长,进入续播
        if (parseFloat(TimeInt) + 1 < parseFloat(RemainingTime)) {
            if (pd == 0) {
                console.log(TimeInt);
                ContinuedBroadcasting(TimeInt);
                pd = 1;
            }
        } //不可以,插入播放进度
        else {
            TimeInterval();
        }
    }
        //不可以,插入播放进度
    else {
        TimeInterval();
    }
}
//断点续播(秒)
function ContinuedBroadcasting(Second) {
    //断点续播播放进度推后一秒
    $(‘video‘).prop(‘currentTime‘, parseFloat(Second) - 1);   //播放
    $(‘video‘).trigger(‘play‘);
    xutime = setInterval(function () {
        CurrentTime = video.currentTime.toFixed(1); //播放进度(单位:秒)
        console.log("续播进度:" + CurrentTime);
        InsetTimeInterval(CurrentTime);
    }, 1000);
}

//记录播放进度
function TimeInterval() {
    if (parseFloat(CurrentTime) > parseFloat(RemainingTime)) {
        clearInterval(time);
    }
    //轮询插入当前播放进度
    time = setInterval(function () {
        CurrentTime = video.currentTime.toFixed(1); //当前播放进度(单位:秒)
        console.log("当前进度:" + CurrentTime);
        InsetTimeInterval(CurrentTime);
    }, 1000);
}

var id = 0;
var pd = 0;
$("video").click(function () {
    if (id == 0) {
        //播放暂停
        $(‘video‘).trigger(‘pause‘);
        id = 1;
        clearInterval(time);
        clearInterval(xutime);
    } else {
        //播放继续
        $(‘video‘).trigger(‘play‘);
        id = 0;
        TimeInterval();
    }
})

//获取进度
function TimeIntervalSelect() {
    var Progress;
    $.ajax({
        url: "/Video/TimeSelect",
        type: ‘GET‘,
        async: false,
        dataType: ‘json‘,
        success: function (data) {
            Progress = data;
        }
    });
    return Progress;
}

//插入进度
function InsetTimeInterval(CurrentTime) {
    $.ajax({
        url: "/Video/Time",
        data: {CurrentTime: CurrentTime },
        type: ‘POST‘,
        async: false,
        dataType: ‘json‘,
        success: function (data) {
        }
    });
}
时间: 2024-11-25 16:24:47

mp4格式-播放和断点续播的相关文章

Html 播放 mp4格式视频提示 没有发现支持的视频格式和mime类型

转自原文 Html 播放 mp4格式视频提示 没有发现支持的视频格式和mime类型 播放mp4格式的时候提示 原因是在IIS中没有添加 mp4 这种文件格式 解决办法: 打开 MIME 类型,然后右键 添加

mp4网页播放代码,有声音无图像的解决办法~

mp4网页播放代码,有声音无图像的解决办法~ 关于网页播放mp4格式的视频,找了一些插件,这里推荐一下video.js 官方网址:http://www.videojs.com/ github :https://github.com/videojs/video.js/ demo:http://www.videojs.com/downloads/video-js-4.12.5.zip 使用方法: ①引入文件:指派flash播放的swf文件 <link href="//example.com/p

配置 nginx 支持 f4v视频格式播放

Nginx默认不支持f4v视频格式播放,解决方法为编辑mime.types文件,在video/mp4加上f4v即可 types {   # Data interchange     application/atom+xml                  atom;     application/json                      json map topojson;     application/ld+json                   jsonld;     

多线程中的&quot;断点&quot;续传《notify()和wait()》

目前在做一个项目,关于软件管理与下载的,估计项目提交日期定在6月9号.项目做了有20天了,但是在一个功能上卡住了.在这个项目中有一个功能----APK的下载需要实现.相信大家都玩过很多关于下载APK的软件,在这个下载功能上,应该能够清楚的知道有:断点续传:也就是当你点击下载之后的下载过程中,可以点击暂停来临时控制此时要不要继续下载.当点击继续下载的时候,这个软件会接着暂停之前的进度继续下载. 由于第一次接触这种功能的实现,在网络上搜索到的都是使用Sqlite来记录下载的进度,然后通过sqlite

让IIS服务器支持flv,f4v,mp4在线播放(2003,2008)

上传了flv或MP4文件到服务器,可输入正确地址通过http协议来访问总是出现"无法找到该页"的404错误呢?这就表明mp4格式文件是服务器无法识别的,其实,这是没有在IIS中将相应的MIME类型进行设置的原因.那该怎样设置MIME类型呢? 开启mp4文件的话,需要在 "Internet信息(IIS)管理器"中右击需要更改的网站或目录,可以打开形如下图的窗口(我右击的是文件夹而不是站点,所以您右击站点的话打开的或许比我的选项卡多,不管怎样您点击HTTP头就可以打开怎

腾讯下载的视频qlv格式转化为MP4格式

最近在看腾讯视频的时候发现下载下来的视频格式都是qlv格式,且不能用其他播放器播放,甚是恼怒,网上找了很多方法都很繁琐,于是自己写了一个小程序来处理这个问题.把下载下来的qlv格式转化为MP4格式 首先还是按照网上所说的,找到这些文件所在位置: 首先将需要转换mp4格式的视频下载,要下载完成才能进行转换.  点击设置,将文件所在位置复制  将复制内容粘贴到我的电脑,如图所示位置,点击回车[Enter]键,打开后我们找到下载文件, (因为腾讯下载内容一般都为隐藏,所以需要将文件找到)  我们打开其

火狐放不了html5 video MP4格式

火狐放不了html5 video MP4格式 这里教大家解决火狐播放html5 video时 显示视频或mime类型不支持 这是因为火狐不支持mp4格式视频的播放,所以得把mp4格式的视频转为ogg格式的 一:下载 这里提供一个转换工具 [Total Video Audio Converter] 如果链接失效,请自行百度. 二:解压,打开 这里是解压版的,解压到硬盘里就行了, 然后双击totalvacvt.exe 这里是注册码: 姓 名:www.uzzf.com 序列号:ABCDEF1234BC

如何快速将MOV格式视频转换成MP4格式

使用Mac用户都熟知,MOV是其自带录屏软件Quick Time默认输出视频格式.它是一种有损压缩格式,在Mac端支持较好.但是由于其自身的限制,Mac用户发给Windows用户的MOV视频在对方的播放器中无法播放.MP4是一种几乎在所有平台与设备中支持较好的一种格式,所以可以将MOV转MP4后再进行播放.以下是为大家推荐的几款比较简单易操作的软件,大家可以根据自己的需求选择适合自己的软件. MOV转换MP4软件推荐 方法一:在线视频转换器 方法二:迅捷视频转换器 在线视频转换器 首先为大家推荐

多媒体文件格式(一):MP4 格式

在互联网常见的格式中,跨平台最好的应该就属MP4文件了.因为MP4文件既可以在PC平台的Flashplayer中播放,又可以在移动平台的Android.iOS等平台中进行播放,而且使用系统默认的播放器即可以播放. MP4格式是最常见的多媒体文件格式. 一.MP4 格式标准介绍 MP4格式标准为ISO-14496 Part 12.ISO-14496 Part 14,标准内容不是很多,下面我们来介绍一下格式标准中一些重要的信息. MP4是一种描述较为全面的容器格式,被认为可以在其中嵌入任何形式的数据