<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="expires" content="0">

<title>video播放视频以及相关事件</title>

<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css" />

<style type="text/css">

.playVideo{

    margin: 100px;

}

</style>

</head>

<body>

<div class="playVideo">

    <video class="news_video" src="fayuan.mp4" controls=""></video>

</div>

<script type="text/javascript" src="jquery/jquery.min.js"></script>

<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>

<script type="text/javascript">

$(function(){  

    playVideo();  

    /*视频播放状态*/

    $('.news_video').bind('play', function () {

        alert("正在播放视频");

    });  

    /*视频结束或错误*/

    $('.news_video').bind('error ended', function(){

        alert("播放视频结束");

    })  

    /*视频暂停*/

    $('.news_video').bind('pause', function () {

        alert("暂停");

    });  

　　video.controls=true;//显示进度条
}) //播放视频  function playVideo(){ var video = $(".news_video"); if(video.length>0){ video[0].play(); } } </script> </body> </html>

video播放视频以及相关事件的更多相关文章

  1. HTML5 - 使用<video>播放视频

    ,下面是一个播放视频的最简单样例 (controls属性告诉浏览器要有基本播放控件) <video src="hangge.mp4" controls></vid ...

  2. 微信浏览器video播放视频踩坑

    video属性介绍 iOS的属性 playsinline On iPhone, video playsinline elements will now be allowed to play inlin ...

  3. HTML5 video 播放视频黑屏

    <video width="320" height="240" controls>        <source src="movi ...

  4. H5 video播放视频遇到的问题

    我在别的网站上下载了一个mp4格式的视频,加到video标签里可以正常播放, 然后我用FLV自己转成mp4,却提示不支持的格式和mine类型, 后来找到一篇文章 http://jingyan.baid ...

  5. 如何使用微信小程序video组件播放视频

    相信很多人都有在手机上看视频的习惯,比较看视频更真实更形象.那么我们在微信小程序中如何观看视频呢?这就需要video组件的帮忙了.今天我们就给大家演示一下,如何用微信小程序组件video播放视频.我们 ...

  6. 关于大视频video播放的问题以及解决方案（m3u8的播放）

    在HTML5里,提供了<video>标签,可以直接播放视频,video的使用很简单: <video width="320" height="240&qu ...

  7. 手机浏览器自动播放视频video（设置autoplay无效）的解决方案

    1.问题的提出 某一天接了个需求,需要在手机的H5页面内加入视频,我开开心心做完,准备交付的时候,问题来了,PM想要用户一进入页面,视频就开始播放,不需要用户手动点击. 2.尝试解决 加autopla ...

  8. video元素和audio元素相关事件

    前言 在利用video元素或audio元素读取或播放媒体数据时,会触发一系列事件,如果用js脚本来捕抓这些事件,就可以对着这些事件进行处理了. 捕抓的方式有两种: 第一种是监听的方式.使用vedio或 ...

  9. 解决html5 video不能播放 能播放声音不能播放视频

    <video id="playVideo" style="width:90%; height:auto;" controls poster=". ...

随机推荐

  1. PAT-1064（Complete Binary Search Tree）JAVA实现

    Complete Binary Search Tree PAT-1064 本次因为涉及到完全二叉排序树,所以可以使用数组的形式来存储二叉排序树 对输入序列排序后,得到的是中序遍历二叉排序树的序列.对这 ...

  2. HDOJ-4725(Dijikstra算法+拆点求最短路)

    The Shortest Path in Nya Graph HDOJ-4725 这题是关于最短路的问题,但是和常规的最短路有点不同的就是这里多了层次这一结构. 为了解决这一问题可以把每一层抽象或者划 ...

  3. 【转载】markdown数学常用公式箭头符号

    来源1:https://www.jianshu.com/p/3f01c5658356 来源2:https://blog.csdn.net/smstong/article/details/4434063 ...

  4. .Net Core 2.1 升级3.1 问题整理

    随着技术的不断拓展更新,我们所使用的技术也在不断地升级优化,项目的框架也在不断地升级,本次讲解 .net core 2.1  升级到3.1所需要注意的事项: 当项目框架升级后,所有的Nuget引用也会 ...

  5. python对一个文本的解析

    # 定义Tag的签注 controlAreaStart ="<ControlArea::黄冈>" controlAreaEnd = "</Control ...

  6. python 查看模块中的方法

    way 1.help() way 2.dir() # dir() 函数不带参数时,返回当前范围内的变量.方法和定义的类型列表: way 3. 使用inspect模块, inspect.getmembe ...

  7. 浅析MyBatis（三）：聊一聊MyBatis的实用插件与自定义插件

    在前面的文章中,笔者详细介绍了 MyBatis 框架的底层框架与运行流程,并且在理解运行流程的基础上手写了一个自己的 MyBatis 框架.看完前两篇文章后,相信读者对 MyBatis 的偏底层原理和 ...

  8. OpenCV图像处理中的“机器学习"技术的使用

    注意,本文中所指"机器学习"(ML)技术,特指SVM.随机森林等"传统"技术. 一.应用场景        相比较当下发展迅速的各路"端到端" ...

  9. Python基础之:Python中的类

    目录 简介 作用域和命名空间 class 类对象 类的实例 实例对象的属性 方法对象 类变量和实例变量 继承 私有变量 迭代器 生成器 简介 class是面向对象编程的一个非常重要的概念,python ...

  10. 分享15个实用VSCode插件，快来收藏吧！

    Visual Studio Code 是由微软开发的一款免费.跨平台的文本编辑器.它有卓越的性能和丰富的功能.VSCode 也有一个扩展和主题市场,为了帮助大家挑选出值得下载的插件,我们针对性的收集了 ...