需求：页面中有2个普通按钮a，b。还有一个video标签，能成功播放出视频。。我想要的效果是，点击a按钮，视频开始播放，点击b按钮，视频播放停止！！！<br><br>----------------------------------------------------code---------------------------------------------------------------------------<br><br><!DOCTYPE html>

<html>

  <head>

    <title>Simple JavaScript Controller</title>

    <script type="text/javascript">

       function playPause() {

       var myVideo = document.getElementsByTagName('video')[0];   //获取视频video

       if (myVideo.paused){

           myVideo.play();

       }else{

           myVideo.pause();

       }

       function makeBig() {     //全屏  高度2倍

       var myVideo = document.getElementsByTagName('video')[0];

       myVideo.height = (myVideo.videoHeight * 2 ) ;

       }

       function makeNormal() {   //取消全屏

       var myVideo = document.getElementsByTagName('video')[0];

       myVideo.height = (myVideo.videoHeight) ;

       }

    </script>

  </head>

  <body>

     <div class="video-player" align="center">

     　　 <video src="myMovie.m4v" poster="poster.jpg" ></video>     <!--视频 -->

      <br>

      <a href="javascript:playPause();">Play/Pause</a> <br>    <!--播放  暂停-->

      <a href="javascript:makeBig();">2x Size</a>     <!--放大视频--><br>

[解决办法]

      <a href="javascript:makeNormal();">1x Size</a> <br>     <!--还原视频 -->

     </div>

  </body>

</html>

　　[解决办法]:

var myVideo = document.getElementsByTagName('video')[0];

可以换成

document.getElementById('videoId');

<video src="myMovie.m4v" poster="poster.jpg" id="videoId"></video>

[解决办法]

额。来晚了。。。

停止的话...

myVideo.currentTime = 0;    //属性设置或返回音频/视频播放的当前位置（以秒计）。当设置该属性时，播放会跳跃到指定的位置。

myVideo.pause();

------解决方案--------------------

mark

　　

js控制html5 【video】标签中视频的播放和停止的更多相关文章

  1. 用HTML5 video标签插入视频，在谷歌浏览器上播放视频时，右下角显示的下载按钮怎么去掉

    使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...

  2. html5 video标签屏蔽右键视频另存为的js代码-HTML5教程

    点评:html5 video标签本身有下载功能但是在video区域内,点击右键可以将“视频另存为”下面是屏蔽右键视频另存为的js代码,有此需求的朋友不要错过   做HTML5的video标签,本身我们 ...

  3. html5 video标签如何禁止视频下载

    html5 video标签如何禁止视频下载 一.总结 一句话总结:bing方法给video对象绑定return false的匿名方法. 1.html5 video标签如何禁止视频下载? bing方法给 ...

  4. 【实战问题】【3】iPhone无法播放video标签中的视频

    问题:视频都是MP4格式,视频可以在手机上正常播放.video标签中的视频在安卓点击可以播放,但在iPhone无法播放 解决方案: 1,视频编码格式问题,具体iPhone手机支持的是哪些格式可见官方的 ...

  5. Web视频播放 之 【HTML5 Video标签】

    一.说明 HTML5中引入了video标签用于方便的在浏览器中播放视频,不在需要对flashPlayer进行依赖,更加轻量级.但在浏览器兼容.视频协议支持方面还有一些需要注意的问题. 二.浏览器兼容 ...

  6. [JavaScript] html5 video标签注意事项

    Chrome 66 禁止声音自动播放 声音无法自动播放这个在IOS/Android上面一直是个惯例,桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在2018年 ...

  7. html5 video微信浏览器视频不能自动播放

    html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...

  8. html5-7 html5语义标签和视频

    html5-7  html5语义标签和视频 一.总结 一句话总结:设计网站的时候要兼顾早期浏览器的话,最新技术要缓着用,自己可以先尝试. 1.html5所有标签共有属性有哪四种? 1.id2.clas ...

  9. JavaScript学习笔记-Js操控HTML5 <progress> 标签

    Js操控----HTML5 <progress> 标签 简单模拟下下载进度跑条 <h4>加载进度</h4> <input type="button& ...

随机推荐

  1. XML Schema——笔记整理

    什么是 XML Schema? 定义可出现在文档中的元素 定义可出现在文档中的属性 定义哪个元素是子元素 定义子元素的次序 定义子元素的数目 定义元素是否为空,或者是否可包含文本 定义元素和属性的数据 ...

  2. ubuntu16.04系统安装

    0x1镜像下载 (1)下载地址http://cn.ubuntu.com/download/ 0x2 安装 (1)打开vmware,创建新的虚拟机 (2)选择自定义安装 (3)直接下一步,选择稍后安装系 ...

  3. Spring Boot 揭秘与实战（一） 快速上手

    文章目录 1. 简介 1.1. 什么是Spring Boot 1.2. 为什么选择Spring Boot 2. 相关知识 2.1. Spring Boot的spring-boot-starter 2. ...

  4. JavaScript中的内置对象-8--4.date对象中-获取,设置日期时间的方法; 获取,设置年月日时分秒及星期的方法;

    学习目标 1.掌握创建日期对象的方法 2.掌握date对象中获取日期时间的方法 3.掌握date对象中设置日期时间的方法 如何创建一个日期对象 语法:new Date(); 功能:创建一个日期时间对象 ...

  5. ubuntu安装nvidia驱动

    安装环境: ubuntu 版本:12.04.02 LTS  64bit nvidia 驱动版本:NVIDIA-Linux-x86_64-310.19.run nvidia 显卡:GT640 安装过程主 ...

  6. /dev/i2c-*不见了

    /********************************************************************** * /dev/i2c-*不见了 * 说明: * 能在他的 ...

  7. 了解Git的工作区和暂存区

    Git有工作区,暂存区之分. 1.工作区 我们电脑上的某个被Git管理的文件夹,就是一个工作区. 比如说我的GitWorkText文件夹,如图: 2.版本库(Repository) 在工作区有一个隐藏 ...

  8. HDU - 5033： Building（单调栈 ，求一排高楼中人看楼的最大仰角）

    pro:现在在X轴上有N个摩天大楼,以及Q个人,人和大楼的坐标各不相同,保证每个人左边和右边都有楼,问每个人能看到天空的角度大小. sol:不难想到就是维护凸包,此题就是让你模拟斜率优化,此处没有斜率 ...

  9. servlet简单介绍

    什么是Servlet? servlet是一种Java编程语言类,用于扩展托管通过请求 - 响应编程模型访问的应用程序的服务器的功能.尽管servlet可以响应任何类型的请求,但它们通常用于扩展Web服 ...

  10. loadrunner如何对mysql进行增删改查

    libraries.zip  地址:链接:https://pan.baidu.com/s/1kIZ2aBCOFSJ9l727MxgIKQ 密码:40vq *   说明一下,因为 lr 有很多库文件都没 ...