使用jQuery播放/暂停 HTML5视频
文章来自:http://blog.okbase.net/jquery2000/archive/4485.html
我尝试用jQuery控制HTML5视频,两个视频分别在两个tab中,我希望点中tab后,该tab里的视频可以立即播放,而另外tab里的视频能够停止。
我的代码是这样的:
$( '#playMovie1' ).click(function(){ $( '#movie1' ).play(); }); |
但发现这样不行,而用以下的js是可以的:
document.getElementById( 'movie1' ).play(); |
解决方法:
play并不是jQuery的函数,而是DOM元素的函数,所以我们需要通过DOM来调用play,代码如下:
$( '#videoId' ).get( 0 ).play(); |
最简单的方法实现Play和Pause:
$( 'video' ).trigger( 'play' ); $( 'video' ).trigger( 'pause' ); |
点击视频就能播放和暂停
$( "video" ).trigger( "play" ); //for auto play $( "video" ).addClass( 'pause' ); //for check pause or play add a class $( 'video' ).click(function() { if ($( this ).hasClass( 'pause' )) { $( "video" ).trigger( "play" ); $( this ).removeClass( 'pause' ); $( this ).addClass( 'play' ); } else { $( "video" ).trigger( "pause" ); $( this ).removeClass( 'play' ); $( this ).addClass( 'pause' ); } }) |
静音和取消静音
$( 'body' ).find( "video" ).attr( 'id' , 'video' ) var myVid = document.getElementById( "video" ); $( '.sound-icon' ).click(function() { //here "sound-icon" is a anchor class. var sta = myVid.muted; if (sta == true ) { myVid.muted = false ; } else { myVid.muted = true ; } }) |
HTML 5中播放视频的方法:
<video width= "640" height= "360" src= "http://www.youtube.com/demo/google_main.mp4" controls autobuffer> <p> Try this page in Safari 4 ! Or you can </video> |
自动播放:
<video src= "abc.mov" autoplay> </video> |
使用poster在视频无法加载时显示图片:
<video width= "640" height= "360" src= "http://www.youtube.com/demo/google_main.mp" autobuffer controls poster= "whale.png" > <p>Try this page in Safari 4 ! Or you can <a href= "http://www.youtube.com/demo/google_main.mp4" >download the video</a> instead.</p> </video> |
一个比较简洁的例子:
<script type= "text/javascript" > function vidplay() { var video = document.getElementById( "Video1" ); var button = document.getElementById( "play" ); if (video.paused) { video.play(); button.textContent = "||" ; } else { video.pause(); button.textContent = ">" ; } } function restart() { var video = document.getElementById( "Video1" ); video.currentTime = 0 ; } function skip(value) { var video = document.getElementById( "Video1" ); video.currentTime += value; } </script> </head> <body> <video id= "Video1" > // Replace these with your own video files. <source src= "demo.mp4" type= "video/mp4" /> <source src= "demo.ogv" type= "video/ogg" /> HTML5 Video is required for this example. <a href= "demo.mp4" >Download the video</a> file. </video> <div id= "buttonbar" > <button id= "restart" onclick= "restart();" >[]</button> <button id= "rew" onclick= "skip(-10)" ><<</button> <button id= "play" onclick= "vidplay()" >></button> <button id= "fastFwd" onclick= "skip(10)" >>></button> </div> |
下面是一个比较完整的例子:
<html > <head> <title>Full player example</title> <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet or local site. --> <!-- <meta http-equiv= "X-UA-Compatible" content= "IE=edge" /> --> <script type= "text/javascript" > function init() { // Master function, encapsulates all functions var video = document.getElementById( "Video1" ); if (video.canPlayType) { // tests that we have HTML5 video support // if successful, display buttons and set up events document.getElementById( "buttonbar" ).style.display = "block" ; document.getElementById( "inputField" ).style.display = "block" ; // helper functions // play video function vidplay(evt) { if (video.src == "" ) { // inital source load getVideo(); } button = evt.target; // get the button id to swap the text based on the state if (video.paused) { // play the file, and display pause symbol video.play(); button.textContent = "||" ; } else { // pause the file, and display play symbol video.pause(); button.textContent = ">" ; } } // load video file from input field function getVideo() { var fileURL = document.getElementById( "videoFile" ).value; // get input field if (fileURL != "" ) { video.src = fileURL; video.load(); // if HTML source element is used document.getElementById( "play" ).click(); // start play } else { errMessage( "Enter a valid video URL" ); // fail silently } } // button helper functions // skip forward, backward, or restart function setTime(tValue) { // if no video is loaded, this throws an exception try { if (tValue == 0 ) { video.currentTime = tValue; } else { video.currentTime += tValue; } } catch (err) { // errMessage(err) // show exception errMessage( "Video content might not be loaded" ); } } // display an error message function errMessage(msg) { // displays an error message for 5 seconds then clears it document.getElementById( "errorMsg" ).textContent = msg; setTimeout( "document.getElementById('errorMsg').textContent=''" , 5000 ); } // change volume based on incoming value function setVol(value) { var vol = video.volume; vol += value; // test for range 0 - 1 to avoid exceptions if (vol >= 0 && vol <= 1 ) { // if valid value, use it video.volume = vol; } else { // otherwise substitute a 0 or 1 video.volume = (vol < 0 ) ? 0 : 1 ; } } // button events // Play document.getElementById( "play" ).addEventListener( "click" , vidplay, false ); // Restart document.getElementById( "restart" ).addEventListener( "click" , function () { setTime( 0 ); }, false ); // Skip backward 10 seconds document.getElementById( "rew" ).addEventListener( "click" , function () { setTime(- 10 ); }, false ); // Skip forward 10 seconds document.getElementById( "fwd" ).addEventListener( "click" , function () { setTime( 10 ); }, false ); // set src == latest video file URL document.getElementById( "loadVideo" ).addEventListener( "click" , getVideo, false ); // fail with message video.addEventListener( "error" , function (err) { errMessage(err); }, true ); // volume buttons document.getElementById( "volDn" ).addEventListener( "click" , function () { setVol(-. 1 ); // down by 10% }, false ); document.getElementById( "volUp" ).addEventListener( "click" , function () { setVol(. 1 ); // up by 10% }, false ); // playback speed buttons document.getElementById( "slower" ).addEventListener( "click" , function () { video.playbackRate -= . 25 ; }, false ); document.getElementById( "faster" ).addEventListener( "click" , function () { video.playbackRate += . 25 ; }, false ); document.getElementById( "normal" ).addEventListener( "click" , function () { video.playbackRate = 1 ; }, false ); document.getElementById( "mute" ).addEventListener( "click" , function (evt) { if (video.muted) { video.muted = false ; evt.target.innerHTML = "<img alt='volume on button' src='vol2.png' />" } else { video.muted = true ; evt.target.innerHTML = "<img alt='volume off button' src='mute2.png' />" } }, false ); } // end of runtime } // end of master </script> </head> <body onload= "init();" > <video id= "Video1" controls style= "border: 1px solid blue;" height= "240" width= "320" title= "video element" > HTML5 Video is required for this example </video> <div id= "buttonbar" style= "display: none;" )> <button id= "restart" title= "Restart button" >[]</button> <button id= "slower" title= "Slower playback button" >-</button> <button id= "rew" title= "Rewind button" ><<</button> <button id= "play" title= "Play button" >></button> <button id= "fwd" title= "Forward button" >>></button> <button id= "faster" title= "Faster playback button" >+</button> <button id= "Button2" title= "Mute button" ><img alt= "Volume on button" src= "vol2.png" /></button> <br /> <label>Playback </label> <label>Reset playback rate: </label><button id= "normal" title= "Reset playback rate button" >=</button> <label> Volume </label> <button id= "volDn" title= "Volume down button" >-</button> <button id= "volUp" title= "Volume up button" >+</button> <button id= "mute" title= "Mute button" ><img alt= "Volume on button" src= "vol2.png" /></button> </div> <br/> <div id= "inputField" style= "display:none;" > <label>Type or paste a video URL: <br/> <input type= "text" id= "videoFile" style= "width: 300px;" title= "video file input field" value= "http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" /> <button id= "loadVideo" title= "Load video button" >Load</button> </label> </div> <div title= "Error message area" id= "errorMsg" style= "color:Red;" ></div> </body> </html> |
使用jQuery播放/暂停 HTML5视频的更多相关文章
- 【轉】使用jQuery播放/暂停 HTML5视频
jQuery不可以使用play()方法,但js是可以的: document.getElementById('movie1').play(); 解决方法:play并不是jQuery的函数,而是DOM ...
- HTML5 视频规范简介
HTML5 视频规范简介 创建于 2013-02-03, 周日 00:56 作者 白建鹏 HTML 一词是“超文本标记语言”(Hyper-Text Markup Language)的缩写,是用于描 ...
- [转] Android 4.4中播放HTML5视频<video>的Bug
近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width= ...
- 31.JS实现控制HTML5背景音乐播放暂停
实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现.首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover ...
- 【转】Android 4.4中播放HTML5视频<video>的Bug
近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width= ...
- html5页面怎么播放音频和视频
html5页面怎么播放音频和视频 一.总结 一句话总结:html5 音频和视频标签:(audio And video),局限是不同浏览器对音频视频的格式支持很让人头痛 1.最基础的音频和视频标签的使用 ...
- 网页视频不能自动播放?HTML5 video报错Uncaught (in promise) DOMException解决方法
话说发哥四年前写了一个网页,如上图效果,实际网址http://pano.z01.com ,话说做好时是正常的,突然某一天,客户说你这个网站动画不见了,这是什么原因? 结果检查脚本一切正常. 其实也不是 ...
- HTML5播放暂停音乐
查看效果:http://hovertree.com/code/jquery/ueyf7gn4.htm 代码如下: <!DOCTYPE html> <html> <head ...
- html5视频全频播放
html5视频全频播放 旋转90度 对video进行缩放 修正position 效果还凑合 代码 $(media).rotate({ // angle: 90, duration: 100, anim ...
随机推荐
- 360浏览器拦截弹窗,window.open方式打不开新页面
window.open虽然在很多时候被广大中小站长用于弹窗广告的展示,所以广受争议,但是在业务需求中还是有很多场景需要用到此功能.然而,大多数浏览器对此都有一定的安全策略进行阻止,为此本文将针对以下浏 ...
- nginx日志格式含义
- linux之access函数解析
[lingyun@localhost access_1]$ ls access.c 实例一: [lingyun@localhost access_1]$ cat access.c /******** ...
- 【转】YUV420P的格式以及转换为RGB565的代码(Android摄像头的输出一般为YUV420P)
http://blog.csdn.net/daisyhd/article/details/38866809 static void cvt_420p_to_rgb565(int width, int ...
- [互联网面试笔试汇总C/C++-7] 寻找两个链表的第一个交点-微策略
题目:有两个链表,找出他们的第一个交点,要求每个链表只能遍历一次,可以对链表进行任何操作,空间O(1). 思路: 这个题目刚开始看觉得要遍历一次有点困难,但是仔细一想,人家告诉说可以对链表进行任何操作 ...
- Context
Context,中文直译为“上下文”,SDK中对其说明如下: Interface to global information about an application environment. Thi ...
- careercup-数组和字符串1.4
1.4 编写一个方法,将字符串中的空格全部替换为“%20“.假定该字符串尾部有足够的空间存放新增字符,并且知道字符串的”真实“长度. C++实现代码: #include<iostream> ...
- AOP 的利器:ASM 3.0 介绍
引言 什么是 ASM ? ASM 是一个 Java 字节码操控框架.它能被用来动态生成类或者增强既有类的功能.ASM 可以直接产生二进制 class 文件,也可以在类被加载入 Java 虚拟机之前动态 ...
- SSH公钥(public key)验证
安全的设置服务器 登陆,之前用用户名和密码登陆服务器 这样不安全 ,用SSH公钥(public key)验证 这个办法能很好的解决 登陆服务器 和安全登陆服务器 的特点: 目标: Client 免输 ...
- build/envsetup.sh中hmm、get_abs_build_var、get_build_var解析
function hmm() { # 打印帮助信息 cat <<EOF Invoke ". build/envsetup.sh" from your shell to ...