js视频播放器/video详解

js视频播放器/详解/html5

下面展示一些 内联代码片。

// HTML
<body><video id="myPlayer" width="200" controls autoplay="autoplay" loop><source src="./img/卡点美女.mp4" type="video/mp4" ></video><br><input type="button" value="快进" onClick="Forward1()" /><input type="button" value="回访" onClick="Forward2()" /><input type="button" value="正常" onClick="Forward5()" /><input type="button" value="加速*3" onClick="Forward3()" /><input type="button" value="暂停/播放" onClick="Forward4()"/><input type="button" value="再来一个视频" onClick="Forward6()"/><p id="demo">创建视频取自：</p></body>

//js部分<script type="text/javascript">function Forward1(){var el=document.getElementById("myPlayer");var time=el.currentTime;        /* 获取属性currentTime */el.currentTime=time + 10;        /* 设置属性currentTime，快进10 */}function Forward2(){var el=document.getElementById("myPlayer");var time=el.currentTime;        /* 获取属性currentTime */el.currentTime=time - 10;        /* 设置属性currentTime，回访10 */}function Forward3(){var el=document.getElementById("myPlayer");var time=el.playbackRate;        /* 获取属性playbackRate */el.playbackRate= 3 ;        /* 设置属性playbackRate，3倍速 */}function Forward4(){var el=document.getElementById("myPlayer");if (el.paused) { //判断视频是否在播放，播放则暂停，未播放则播放el.play(); } else {el.pause();}         }function Forward5(){var el=document.getElementById("myPlayer");var time=el.playbackRate;        /* 获取属性playbackRate */el.playbackRate= 1 ;        /* 设置属性playbackRate，1倍速 */   }function Forward6(){var el=document.getElementById("myPlayer");var elx = document.createElement("VIDEO");elx.setAttribute("width", "200");elx.setAttribute("controls", "controls");elx.setAttribute("autoplay", "autoplay");elx.setAttribute("loop", "loop");elx.setAttribute("src", "./img/卡点美女.mp4");document.body.appendChild(elx);document.getElementById("demo").innerHTML = "这里取自：https://www.w3school.com.cn/tiy/t.asp?f=jsref_video_create";}

标签定义及使用说明

 <video> 标签定义视频，比如电影片段或其他视频流。<video> 元素支持三种视频格式：MP4、WebM、Ogg。

video的参数

     autoplay:加载完毕之后自动播放poster：规定视频正在下载时显示的图像，直到用户点击播放按钮controls：向用户显示控件，比如播放按钮，音量等loop：循环播放preload：预加载,出现autoplay就不要使用preloadmeted：视频的播放默认静音height|width：高宽设置，推荐只设置一个src: 要播放的视频的路径。

video的对象属性

     audioTracks: 返回表示可用音频轨道的 AudioTrackList 对象。buffered: 返回表示视频已缓冲部分的 TimeRanges 对象。controller: 返回表示视频当前媒体控制器的 MediaController 对象。crossOrigin: 设置或返回视频的 CORS 设置。currentSrc: 返回当前视频的 URL。currentTime: 设置或返回视频中的当前播放位置（以秒计）。defaultMuted: 设置或返回视频默认是否静音。defaultPlaybackRate: 设置或返回视频的默认播放速度。duration: 返回视频的长度（以秒计）。ended: 返回视频的播放是否已结束。error: 返回表示视频错误状态的 MediaError 对象。mediaGroup: 设置或返回视频所属媒介组合的名称。muted: 设置或返回是否关闭声音。networkState: 返回视频的当前网络状态。paused: 设置或返回视频是否暂停。playbackRate: 设置或返回视频播放的速度。played: 返回表示视频已播放部分的 TimeRanges 对象。readyState: 返回视频当前的就绪状态。seekable: 返回表示视频可寻址部分的 TimeRanges 对象。seeking: 返回用户当前是否正在视频中进行查找。startDate: 返回表示当前时间偏移的 Date 对象。textTracks: 返回表示可用文本轨道的 TextTrackList 对象。videoTracks: 返回表示可用视频轨道的 VideoTrackList 对象。volume: 设置或返回视频的音量。

video的方法

     addTextTrack()  向视频添加新的文本轨道。canPlayType()   检查浏览器是否能够播放指定的视频类型。load()   重新加载视频元素。play() 开始播放视频。pause()  暂停当前播放的视频。

访问 Video 对象

     您可以通过使用 getElementById() 来访问 <video> 元素：       var el = document.getElementById("myPlayer");

创建 Video 对象

 您可以通过使用 document.createElement() 方法来创建 <video> 元素：

js视频播放器/video详解相关推荐

Android的媒体播放器——简易视频播放器（详解）
一.案例效果二.主界面的设计与功能 2.1 案例效果 2.2 布局界面 activity_main.xml 参考代码: <?xml version="1.0" encodi ...
[h5]一个基于HTML5实现的视频播放器代码详解
什么是 HTML5? HTML5 是最新的 HTML 标准. HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件. HTML5 拥有新的语义.图形以及多媒体元素. HTML5 提供 ...
摄屏播放插件html5,Js视频播放器插件Video.js使用方法详解
Video.js快速入门我们可以下载 Video.js 的源码放到自己的服务器上,或者使用免费的 CDN 托管版本. 在页面中引用video-js.cs样式文件和video.js 使用免费的CDN托 ...
video.js视频播放器进度条标记的功能实现
video.js视频播放器的使用 video.js视频播放器安装引入使用 video.js视频播放器接到个需求,需要一个视频播放页面,并且进度条需要在某个时间点打上标记.在网上找了一下,发现 ...
ffmpeg播放器实现详解 - 音频同步控制
ffplay是ffmpeg源码中一个自带的开源播放器实例,同时支持本地视频文件的播放以及在线流媒体播放,功能非常强大. FFplay: FFplay is a very simple and port ...
Three.js - 摄像机的使用详解（透视投影摄像机、正交投影摄像机）
一.两种摄像机的区别与比较 Three.js 库提供了两种不同的摄像机:透视投影摄像机和正交投影摄像机. 透视投影摄像机:这种摄像机的效果更贴近真实世界.也就是物体离摄像机越远,它们就会被渲染得越小. ...
computed用发_Vue.js中computed使用详解
这次给大家带来Vue.js中computed使用详解,Vue.js中computed使用的注意事项有哪些,下面就是实战案例,一起来看一下. JS属性: JavaScript有一个特性是Object.d ...
【Vue】播放flv格式视频（flv.js视频播放器）
图片来源:HTTP-FLV直播初探链接 github地址:GitHub - bilibili/flv.js: HTML5 FLV Player 播放flv格式视频 npm install flv.j ...
Lesson 8.1Lesson 8.2 决策树的核心思想与建模流程CART分类树的建模流程与sklearn评估器参数详解
Lesson 8.1 决策树的核心思想与建模流程从本节课开始,我们将介绍经典机器学习领域中最重要的一类有监督学习算法--树模型(决策树). 可此前的聚类算法类似,树模型也同样不是一个模型,而是一类模 ...
nodejs 本地php服务器,node.js创建本地服务器详解
本文主要和大家分享node.js创建本地服务器详解,简易上手node.js后,我们就可以在自己电脑上创建本地服务器了.希望能帮助到大家. 一.先上代码.//请求Node.js自带的http模块. va ...

js视频播放器/video详解

js视频播放器/详解/html5

标签定义及使用说明

video的参数

video的对象属性

video的方法

访问 Video 对象

创建 Video 对象

js视频播放器/video详解相关推荐

最新文章

热门文章