<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<video id="mediaElementID" width="100%" height="100%" autoplay="autoplay"  controls="controls" >

    <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">

</video>

</body>

<script>

    var myVid=document.getElementById("mediaElementID");

    function getCurTime()

    {

        alert(myVid.currentTime);

    }

    function setCurTime()

    {

        myVid.currentTime=8;

    }

    myVid.addEventListener('ended',function(){

        setCurTime();

        myVid.play()

    },false);

</script>

</html>

设置currentTime

注：设置currentTime的方式，video的视频的src地址必须是线上的，本地的地址不会起作用

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        #playervideo{

            width:500px;

            height:300px;

            margin:20px auto;

            background:red;

        }

        #playervideo video{

        }

    </style>

</head>

<body>

<div id="playervideo" class="portfolio-slideshow flexslider animate-onscroll">

    <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" poster="video/demo.jpg" data-setup="{}" height="300" width="100%">

        <source src="artanis-large.mp4" type='video/mp4' />

    </video>

</div>

</body>

<script language="javascript">

    var vList = ['movie.mp4', 'artanis-large.mp4', 'movie.mp4']; // 初始化播放列表

    var vLen = vList.length; // 播放列表的长度

    var curr = 0; // 当前播放的视频

    var video = document.getElementById("example_video_1");

    /*var video = document.createElement("VIDEO");

     video.setAttribute("width", "100%");

     video.setAttribute("height", "500");

     video.setAttribute("id", "example_video_1");

     video.setAttribute("class", "video-js vjs-default-skin");

     video.setAttribute("preload", "none");

     video.setAttribute("poster", "video//demo.jpg");

     video.setAttribute("data-setup", "{}");

     video.setAttribute("controls", "yes");

     document.getElementById("playervideo").appendChild(video);*/

    //document.body.appendChild(video);

    video.addEventListener('ended', play);

    play();

    function play(e) {

        video.src = vList[curr];

        video.load();

        video.play();

        curr++;

        if(curr >= vLen){

            curr = 0; // 播放完了，重新播放

        }

    }

</script>

<!-- /Video player -->

</html>

通过两个视频实现

注：通过两个视频连续播放，poster需要设置一个两个视频衔接处比较接近的图片，禁止黑屏

第二个例子也可以用来实现多个视频连续播放

video设置视频的播放位置（本例中实现效果是视频第一次播放完成后，接下来中从视频的中间部位开始循环播放）的更多相关文章

  1. video标签实现多个视频循环播放

    <head> <!-- If you'd like to support IE8 (for Video.js versions prior to v7) --> </he ...

  2. 最简单的视音频播放演示样例4：Direct3D播放RGB（通过Texture）

    ===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频 ...

  3. 最简单的视音频播放演示样例5：OpenGL播放RGB/YUV

    ===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频 ...

  4. 最简单的视音频播放演示样例3：Direct3D播放YUV，RGB（通过Surface）

    ===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频 ...

  5. 最简单的视音频播放演示样例7：SDL2播放RGB/YUV

    ===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频 ...

  6. 最简单的视音频播放演示样例8：DirectSound播放PCM

    ===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频 ...

  7. android 随手记 videoview循环播放网络视频 和mediaplayer+sufaceview播放网络视频

    1:videoview循环播放视频 1>xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res ...

  8. HTML5中将video设置为背景的方法

    主要用到了video标签,css样式,原理是先将video标签利用position:fixed;使video标签脱离文档流,在将他的z-index设置为最低的,比如-9999.再插入的内容自然就覆盖在 ...

  9. Android - 标准VideoView播放演示样例

    标准VideoView播放演示样例 本文地址: http://blog.csdn.net/caroline_wendy 在Android SDK中的ApiDemos内, 提供标准播放视频的代码,使用V ...

随机推荐

  1. CPU缓存一致性协议与java中的volatile关键字

    有关缓存一致性协议MESI自行百度. 提出问题:volatile在缓存一致性协议上又做了哪些事情?为啥它不保证原子性? 在缓存一致性协议下,CPU为了执行效率使用了写(存储)缓存和失效队列从而导致对用 ...

  2. python36异步任务 获取ip地址的地理位置

    # encoding: utf-8 import asyncio import requests import functools url = "http://ip.zxinc.org/ap ...

  3. Java - 使可访问性最小化

    模块设计是否良好,有个重要的因素在于,相对外部模块是否隐藏内部数据以及实现细节. 设计良好的模块会隐藏实现细节,并将API与其实现隔离开来. 模块之间通过API进行通信,对于内部工作情况互不可见. 即 ...

  4. [javaSE] 数据结构（AVL树基本概念）

    AVL树是高度平衡的二叉树,任何节点的两个子树的高度差别<=1 实现AVL树 定义一个AVL树,AVLTree,定义AVLTree的节点内部类AVLNode,节点包含以下特性: 1.key——关 ...

  5. SpringBoot之整合MyBatis

    今天了解一下SpringBoot如何与我们最常用的ORM框架Mybatis整合. 一. 需要在pom.xml文件里加入mybatis的依赖 <dependency> <groupId ...

  6. JDBC入门（5）--- 时间类型、大数据

    一.时间类型 数据库类型与Java中类型的对应关系: DATE->java.sql.Date:表示日期,只有年月日,没有时分秒,会丢失时间. TIME->java.sql.Time:表示时 ...

  7. Bzoj2395: [Balkan 2011]Timeismoney(最小乘积生成树)

    问题描述 每条边两个权值 \(x,y\),求一棵 \((\sum x) \times (\sum y)\) 最小的生成树 Sol 把每一棵生成树的权值 \(\sum x\) 和 \(\sum y\) ...

  8. sql With(NoLock),With(ReadPast)

    --------------- create table tmp1 ( id int primary key, name ) ) ----------- insert into tmp1(id,nam ...

  9. 《Linux命令行与Shell脚本编程大全第2版》读书笔记

    公司说不准用云笔记了,吓得我赶紧把笔记贴到博客上先..... 近3年前的了,只有一半的章节,后面的没空记录了.... 第1章 可以cat /proc/meminfo文件来观察Linux系统上虚拟内存的 ...

  10. CAD增强属性块的还原（转）

    来自:http://blog.3snews.net/space.php?uid=13924959&do=blog&id=70174 作者:毛毛虫 Demo下载:CAD增强属性块的还原 ...