<!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. Esper简介

    1. CEP(Complex Event Processing, 复杂事件处理) 事件(Event)一般情况下指的是一个系统中正在发生的事,事件可能发生在系统的各个层面上,它可以是某个动作,例如客户下 ...

  2. Button 控件

    Button 控件是由system.Windows.Forms.button类提供,该控件最常用使用就是编写处理按钮的Click事件及MouseEnter事件代码 常用属性 Text按钮的说明 Ima ...

  3. 如鹏网学习笔记(十)DOM

    DOM笔记一.DOM简介 Document Object Model 文档对象模型 DOM的节点树模型:整个文档按照从大到小的节点划分,每一个内容都算作一个节点 DOM API 编程接口 可以用来操作 ...

  4. Docker学习之Docker容器基本使用

    Docker学习之Docker容器基本使用 新建容器并启动 命令格式:docker run --options repository:tag 后台运行 命令格式:-d 已存在的容器相关操作 启动:do ...

  5. C# 提高必备精品--你所需要的NET笔记

    一. 交换两个数据的值: 1.  //创建一个临时变量 //int temp; //temp = num1; ////用num2的值覆盖掉num1 //num1 = num2; ////将存储在临时变 ...

  6. Linux安装之后需要进行的一些步骤

    查看IP 首先安装后需要查看ip用SSH或者XSHELL来连接Linux,查看ip代码 ifconfig 需要执行 sudo yum install net-tools 命令安装之后 就可以看到ip了 ...

  7. [LeetCode]3Sum Closest题解

    3sum Closest: Given an array S of n integers, find three integers in S such that the sum is closest ...

  8. Android Studio下载/更新SDK

    今天安装配置Android Studio的时候,用SDK Manager下载SDK的时候只显示了一个7.0,别的都刷新不出来(被墙了).去网上搜索怎么解决,发现很多帖子的方法已经过时了(跟现在的AS版 ...

  9. Map 模板

    #include<stdio.h> #include<iostream> #include<map> using namespace std; typedef pa ...

  10. 关于Python的那点吐槽

    之前听到过别人有说过Python只是一个玩具做不了大项目,我当时是嗤之以鼻的,不说豆瓣这样的公司采用Python做的网站,GitHub上那么多大项目都是用Python写的,怎么能说Python只是一个 ...