需求：页面中有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. 训练 の Bessie的体重问题

    Bessie的体重问题 题目描述 Bessie像她的诸多姊妹一样,因为从Farmer John的草地吃了太多美味的草而长出了太多的赘肉.所以FJ将她置于一个及其严格的节食计划之中.她每天不能吃多过H ...

  2. meson 中调用shell script

    meson 中有时需要调用其他脚本语言,加之对meson build system接口和原理不熟悉,无奈只有静心学习meson 官方文档,终于皇天不负有心人让我找到了: run_command() 只 ...

  3. java ip 正则表达式

    private static boolean isBoolIp(String ipAddress) { String ip = "(?:(?:25[0-5]|2[0-4][0-9]|[01] ...

  4. [LeetCode&Python] Problem 492. Construct the Rectangle

    For a web developer, it is very important to know how to design a web page's size. So, given a speci ...

  5. C#读取文件夹下所有指定类型，并返回相应类型数据

    C#读取文件夹下所有文件 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享.心 ...

  6. htm基础知识，css的链入以及标签分类。

    <!DocTYPE>  DOC--Document 文档  TYPE  类型  文档类型 告诉浏览器这是什么文件 单标签: meta  设置   charset  设置编码 双标签: 开始 ...

  7. Hive错误：Error: FUNCTION 'NUCLEUS_ASCII' already exists. (state=X0Y68,code=30000)

    问题 初始化derby失败: [root@bigdata111 apache-hive-2.3.0-bin]# schematool -dbType derby -initSchemaSLF4J: C ...

  8. 20165313 《Java程序设计》第五周学习总结

    教材学习总结 下面是我认为的重点,不足之处还请谅解: 1内部类:在一个类中定义另一个类:外嵌类:包含内部类的类. 2内部类的类体中不能声明类变量和类方法:外嵌类的类体中可以用内部类声明对象. 3非内部 ...

  9. python time模块使用笔记（更新）

    import time 添加time模块 关于时间和时间戳: 时间是指日常生活中用的,如某年某月某日 时间戳是一个时间长度,是时间关于一个初始时间(好像是1970.1.1)的秒数 localtime方 ...

  10. django实现api跨域请求访问

    第一步:安装 django-cors-headers pip install django-cors-headers 第二步:配置settings.py文件 --------------------- ...