博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
H5插入视频兼容主浏览器
阅读量:6985 次
发布时间:2019-06-27

本文共 1153 字,大约阅读时间需要 3 分钟。

插入视频的方法有很多种,但是有一些方法不兼容。

方法1:DW插入视频
利用DW插入的视频为flv格式,操作较简单,但是代码复杂,需要浏览器支持flash插件;火狐浏览器需要手动下载flash插件,比较麻烦。
DW插入代码采用<obeject></object>的方法来插入视频;
方法2:<embed src=""></embed> 嵌入式插入视频
查阅资料显示,embed属于嵌入式插入文件,不仅仅只是插入视频,音频等媒体都可以通过embed插入;embed插入视频,它自己会自带一个编译的swf。embed不好控制;
此方法用的比较少,在这次的弹出框中插入视频使用embed插入视频,视频播放不了;比较麻烦;
【推荐】方法3:H5标签video插入;
通过H5的新标签video直接插入视频。

 

注:controls: 视频播放控制台;(可以不用再需要引用额外的JS代码来调控播放/暂停等按钮。不过如果是设计上为了美观,可以引用JS来控制。video标签提供了更多的API来控制)
preload="auto" 页面加载完成后立即开始加载视频;如果设置为preload="meta" 则只加载视频元数据。
poster="images/s12_video-english.jpg" 视频缩略图;
在 <head> 中声明 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> ,可以让页面在高分辨率的手机上显示正确的尺寸,防止因为屏幕像素高而使得页面元素变得很小。
通过video标签插入视频,最好是再引入一个视频插件;目前通过使用视频插件比较方便。
视频插件的使用方法也很简单。先下载两个文件放置到自己项目中的相应路径。然后在页面头部引入就行。
接下来就是在video标签中引入video插件中的“ video-js vjs-default-skin”类;
引入MP4,webm,ogv三种视频文件格式,插件会根据浏览器自动判别适合的格式来播放。兼容性比较强;
问题1:在video标签中需要引入一个data-setup="{}",这个是代表什么?看了bootstrap视频课之后,我大致的猜测这是一个接口,引入相应的代码;在这次的使用的,如果去掉代码中的{},视频播放窗口就会出现问题。查看资料,有的人没有加{}也可以使用,但是有的人使用时也需要加{}。这个问题还需要继续研究,查找答案。

转载于:https://www.cnblogs.com/victor5230/p/5795644.html

你可能感兴趣的文章
javascript核心
查看>>
CSS三大特性:层叠性、继承性、优先级
查看>>
组件的创建方式1
查看>>
Net基础复习
查看>>
自怨自艾和怨天尤人
查看>>
uva 515 King
查看>>
Quartz实现定时任务实例
查看>>
python爬虫的scrapy安装+pymongo的安装
查看>>
webservice gsoap 小记
查看>>
TesCase-GUI(图形用户界面)测试
查看>>
自问自答 学习系列(1):从图像分类,到损失函数,到神经网络
查看>>
GCC built in CAS API
查看>>
C++中如何定义某个数组的引用?
查看>>
C博客作业--指针
查看>>
poj——1163 动态规划
查看>>
C#与时间有关的一些方法
查看>>
android BitMap回收
查看>>
spring 的配置 bean>>property>>name属性
查看>>
洛谷P4114 Qtree1(树链剖分+线段树)
查看>>
51nod 1781 Pinball(线段树)
查看>>