vue播放mu38视频兼容谷歌ie等浏览器
<template>
<div id="id_test_video" style="width:100%; height:auto;"></div>
</template> <script>
export default {
data() {
return { }
},
mounted(){
this.play();
},
methods: {
play(){
var player = new TcPlayer("id_test_video", {
"m3u8":"http://weblive.hebtv.com/live/hbws_bq/index.m3u8",
"autoplay" :true,
"poster": '', // 封面
"width" : "1280",//视频的显示宽度,请尽量使用视频分辨率宽度
"height" : "720"//视频的显示高度,请尽量使用视频分辨率高度
});
}
}
};
</script> <style> </style> // 如果需要清除dom 可以在div上加ref处理;this.$refs.xx.innerHtml = '';多次调用在paly()方法下面写上这句;
文档地址参考:https://cloud.tencent.com/document/product/454/7503;
引入方式 https://www.npmjs.com/package/tcplayer;或index.html引入
vue播放mu38视频兼容谷歌ie等浏览器的更多相关文章
- 页面中插入视频兼容ie8以上的浏览器
有时候页面中需要插入视频,如果不考虑ie8的话:就是直接用h5标签<video></video>就可以了: 但是有的时候需求是需要考虑ie8,这样我们就可以用插件,这种vide ...
- 微信 vue中使用video.js播放m3u8视频,解决安卓自动全屏的问题。
最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...
- html5结合flash实现视频文件在所有主流浏览器兼容播放
来源:http://blog.csdn.net/freshlover/article/details/7535785/ 由于html5的出现,让网页中的视频.音频有了更加便捷的实现方式.但是video ...
- vue播放video插件vue-video-player实现hls, rtmp播放全过程
1.安装插件 1 npm install vue-video-player -S 2.配置插件 在main.js里添加 1 import VideoPlayer from 'vue-video-pla ...
- 开源播放器 ijkplayer (一) :使用Ijkplayer播放直播视频
1.ijkplayer 编码 IjkPlayer支持硬解码和软解码. 软解码时不会旋转视频角度这时需要你通过onInfo的what == IMediaPlayer.MEDIA_INFO_VIDEO_R ...
- Android 使用PLDroidPlayer播放网络视频 依据视频角度自己主动旋转
近期由于项目需求 .须要播放网络视频 .于是乎 研究了一番 ,说说我遇到的那些坑 如今市面上有几个比較主流好用的第三方框架 Vitamio ( 体积比較大,有商业化风险 github:https:// ...
- [转] Android 4.4中播放HTML5视频<video>的Bug
近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width= ...
- Android 播放在线视频
首先开启电脑上的tomcat,将视频文件放在Tomcat 7.0\webapps\ROOT中 不用修改代码,直接输入地址即可,运行如下: 播放在线视频,必须要求手机支持当前的格式,才可以播放 播放的原 ...
- Android Multimedia框架总结(二)MediaPlayer框架及播放网络视频案例
前言:前面一篇我们介绍MediaPlayer相关方法,有人说,没有实际例子,看得不是很明白,今天在分析MediaPlayer时,顺带一个播放网络视频例子.可以自行试试.今天分析的都是下几篇介绍各个模块 ...
随机推荐
- Beta冲刺阶段博客集合
Beta冲刺阶段博客集合 课程名称:软件工程1916|W(福州大学) 团队名称: 云打印 作业要求: 项目Beta冲刺(团队) 作业目标:作业集合 团队队员 队员学号 队员姓名 个人博客地址 备注 2 ...
- Dockerfile 常见指令的意义/常见的使用方式/使用示例/
一.什么是 Dockerfile ? Dockerfile 就是生成docker镜像的指令集, 通过使用docker工具执行这些指令集可以方便快捷地生成镜像, 并且能不断复用 Dockerfile 指 ...
- RemoveError: 'setuptools' is a dependency of conda and cannot be removed from conda's operating environment.
今天用conda install 任何包都会出现这个错误: RemoveError: 'setuptools' is a dependency of conda and cannot be remov ...
- js回调与异步加载的用法
以前还是菜鸟的时候(虽然现在依然很菜 -_-|| )对异步加载与回调函数的技术无比向往,但也一直没有使用过,这次因为页面逻辑太过复杂,一堆请求逻辑,如果还是用顺序请求,页面的速度... 领导又要挠头了 ...
- runtime - 消息发送(objc_msgSend)
http://www.jianshu.com/p/95c8cb186673 在OC中,我们对方法的调用都会被转换成内部的消息发送执行对objc_msgSend方法的调用,掌握好消息发送,可以让我们在编 ...
- What is Babel?---JSX and React
Babel is a JavaScript compiler Babel is a toolchain that is mainly used to convert ECMAScript 2015+ ...
- input标签中的accpet
用法 accept 属性只能与 <input type="file"> 配合使用.它规定能够通过文件上传进行提交的文件类型. 提示:请避免使用该属性.应该在服务器端验证 ...
- HDU 6595 Everything Is Generated In Equal Probability (期望dp,线性推导)
Everything Is Generated In Equal Probability \[ Time Limit: 1000 ms\quad Memory Limit: 131072 kB \] ...
- 工作拾记 - 关于easyui模板后台改为vue-element
图1: 数据接口,模拟实现一些基本的数据条目 图2: 获取数据,接口都在src/api中 TODO LIST: 接下来要做的呢: 1. 完善此demo,基本的CURD,现在只有getAll,需要将增加 ...
- 格式化输出(%用法和fomat用法)
一:%用法 1.整数输出 %o —— oct 八进制%d —— dec 十进制%x —— hex 十六进制 2.浮点数输出 %f ——保留小数点后面六位有效数字 %.3f,保留3位小数位%e ——保留 ...