HTML5与微信开发（2）-视频播放事件及API属性

最新推荐文章于 2024-06-13 14:55:33 发布

崔小花o

最新推荐文章于 2024-06-13 14:55:33 发布

阅读量8.6k

点赞数 2

分类专栏： HTML5/CSS3 文章标签： html5 api 视频微信

本文链接：https://blog.csdn.net/u010037928/article/details/50054085

版权

HTML5/CSS3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML5 的视频播放事件想必大家已经期待很久了吧，在HTML4.1、4.0之前我们如果在网页上播放视频无外乎两种方法：
第一种：安装FLASH插件或者微软发布的插件
第二种：在本地安装播放器，在线播放组件之类的
因为并不是所有的浏览器都安装了FLASH插件，就算安装也不一定所有的都能安装成功。像苹果系统就是默认禁用FLASH的，安卓虽然一开始的时候支持FLASH，但是在安卓4.0以后也开始不支持FLASH了，看来FLASH是比较消耗CPU的。
所以针对这一情况，HTML5做了比较大的改动，新加了< video>标签。

< video>标签属性

第一种：传统方式

<video src="move.mp4" controls="controls">
</video>

第二种：如果浏览器不支持的话会进行提示

<video src="move.mp4" controls="controls">
浏览器不支持HTML5视频播放
</video>

第三种：如果浏览器不支持播放格式会尝试其他格式播放，如果不支持第一个就转第二个播放

<video width="500" controls="controls">
<source src="move.ogg" type="video/ogg">
<source src="move.mp4" type="video/mp4">
</video>

属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

HTML5视频API

获得video标签，这里是DOM对象

varvideo = document.getElementById('videoID');

也可以通过jQuery的方法，如下：

varvideo = $('#videoID').get(0);

载入视频：load() ，

播放视频：play() ，

暂停：pause() ，

快进10秒：currentTime+=10

播放速度增加：playbackRate++

播放速度增加0.1：playbackRate+=0.1

音量增加：volume+=0.1

静音：muted=true

播放器示例



<!DOCTYPE html>

<head>

<meta charset=utf-8>

<title>HTML5视频教程-视频播放功能</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">

</script>

<script>

$(document).ready(function(){  

    var video = $('#myvideo');



    $("#play").click(function(){  video[0].play();  });

    $("#pause").click(function(){ video[0].pause(); });

    $("#go10").click(function(){  video[0].currentTime+=10;  });

    $("#back10").click(function(){  video[0].currentTime-=10;  });

    $("#rate1").click(function(){  video[0].playbackRate+=2;  });

    $("#rate0").click(function(){  video[0].playbackRate-=2;  });

    $("#volume1").click(function(){  video[0].volume+=0.1;  });

    $("#volume0").click(function(){  video[0].volume-=0.1;  });

    $("#muted1").click(function(){  video[0].muted=true;  });

    $("#muted0").click(function(){  video[0].muted=false;  });

    $("#full").click(function(){ 

      video[0].webkitEnterFullscreen(); // webkit类型的浏览器

      video[0].mozRequestFullScreen();  // FireFox浏览器

    });

});



</script>

</head>

<video id="myvideo" src="zhuoyaoji.mp4" width="400">

        你的浏览器不支持html5视频播放

</video>

<hr>

<button id="play">播放</button>

<button id="pause">暂停</button>

<button id="go10">快进10秒</button>

<button id="back10">快退10秒</button>

<button id="rate1">播放速度+</button>

<button id="rate0">播放速度-</button>

<button id="volume1">声音+</button>

<button id="volume0">声音-</button>

<button id="muted1">静音</button>

<button id="muted0">解除静音</button>

<button id="full">全屏</button>

</body>



</body>

</html>

崔小花o

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5与微信开发（2）-视频播放事件及API属性

HTML5 的视频播放事件想必大家已经期待很久了吧，在HTML4.1、4.0之前我们如果在网页上播放视频无外乎两种方法：第一种：安装FLASH插件或者微软发布的插件第二种：在本地安装播放器，在线播放组件之类的因为并不是所有的浏览器都安装了FLASH插件，就算安装也不一定所有的都能安装成功。像苹果系统就是默认禁用FLASH的，安卓虽然一开始的时候支持FLASH，但是在安卓4.0以后也开始不
复制链接

扫一扫

专栏目录